Как выбрать или убрать все флажки в чекбоксах с помощью JavaScript
В этом руководстве мы расскажем, как ставить и снимать флажки в input type checkbox с помощью JavaScript. Пользователь сможет одним кликом включить или выключить все элементы списка, что значительно сэкономит его время.
Посмотреть результат
Чтобы установить или убрать все флажки в чекбоксах, нужно:
- Создать HTML файл, сделать его разметку, применить форматирование и написать код.
Шаг 1. Создайте HTML файл, сделайте его разметку, примените стили и напишите код JavaScript.
Мы создали файл HTML и сохранили его как checkbox.html:
<html>
<head>
<script>
function check()
{
var check=document.getElementsByTagName('input');
for(var i=0;i<check.length;i++)
{
if(check[i].type=='checkbox')
{
check[i].checked=true;
}
}
}
function uncheck()
{
var uncheck=document.getElementsByTagName('input');
for(var i=0;i<uncheck.length;i++)
{
if(uncheck[i].type=='checkbox')
{
uncheck[i].checked=false;
}
}
}
</script>
<style>
body
{
width:100%;
margin:0 auto;
padding:0px;
background-color:#424242;
font-family:helvetica;
}
#wrapper
{
text-align:center;
margin:0 auto;
padding:0px;
width:100%;
}
h1
{
margin-top:50px;
color:#D8D8D8;
}
h1 p
{
font-size:14px;
color:white;
}
input[type="button"]
{
background:none;
color:white;
border:1px solid white;
width:100px;
height:50px;
border-radius:50px;
margin:10px;
font-weight:bold;
}
input[type="checkbox"]
{
width:20px;
height:20px;
}
td
{
color:white;
font-weight:bold;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="button" value="Check All" onclick="check();">
<input type="button" value="Uncheck All" onclick="uncheck();">
<table align='center' cellspacing='10'>
<tr>
<td><input type="checkbox"></td><td>PHP</td>
</tr>
<tr>
<td><input type="checkbox"></td><td>HTML</td>
</tr>
<tr>
<td><input type="checkbox"></td><td>JavaScript</td>
</tr>
<tr>
<td><input type="checkbox"></td><td>jQuery</td>
</tr>
<tr>
<td><input type="checkbox"></td><td>CSS</td>
</tr>
<tr>
<td><input type="checkbox"></td><td>MySQL</td>
</tr>
</table>
</div>
</body>
</html>Мы написали разметку для input type checkbox JavaScript, и создали две кнопки: одна для того, чтобы выбрать все элементы списка, другая – чтобы отменить выбор всех элементов списка. Две функции – check() и uncheck() ставят или убирают галочки всех чекбоксов. Функция check() проверяет, является ли элемент чекбоксом. Если да, она ставит в нем галочку. Функция uncheck() работает точно так же, как и check(), только снимает галочки со всех чекбоксов.
Вот и все, выбирать или снимать все флажки в input type checkbox при помощи JavaScript просто! Вы можете изменять этот код на ваше усмотрение. Пожалуйста, оставляйте комментарии в форме снизу.