Как выбрать или убрать все флажки в чекбоксах с помощью JavaScript

В этом руководстве мы расскажем, как ставить и снимать флажки в input type checkbox с помощью JavaScript. Пользователь сможет одним кликом включить или выключить все элементы списка, что значительно сэкономит его время.

Посмотреть результат

check_uncheck

Чтобы установить или убрать все флажки в чекбоксах, нужно:

  1. Создать 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 просто! Вы можете изменять этот код на ваше усмотрение. Пожалуйста, оставляйте комментарии в форме снизу.

Перевод статьи “Check And Uncheck Checkboxes Using JavaScript” был подготовлен дружной командой проекта Сайтостроение от А до Я.