Как отметить все галочки в форме

Чтобы отметить все галочки (checkbox`ы) в определенной форме на странице, можно воспользоваться JavaScript, написав свою функцию.

Отметить или снять отметку со всех чекбоксов

Пример ниже позволяет по клику на одну галочку отметить или снять отметки со всех checkbox`ов формы, вне зависимости от того, были ли ранее отмечены/сняты галочками какие-либо чекбоксы.

Выделить/снять все галочки с чекбоксов
Checkbox 1
Checkbox 2
Checkbox 3
Checkbox 4
Checkbox 5
HTML-форма с checkbox
<form action="" method="POST">
<div style="padding-bottom: 10px;"><input type="checkbox" name="set" onclick="checkboxes_sel_all(this)"> Выделить/снять все</div>
<div><input type="checkbox" name="item_id[]" value="1"> Checkbox 1</div>
<div><input type="checkbox" name="item_id[]" value="2"> Checkbox 2</div>
<div><input type="checkbox" name="item_id[]" value="3"> Checkbox 3</div>
<div><input type="checkbox" name="item_id[]" value="4"> Checkbox 4</div>
<div><input type="checkbox" name="item_id[]" value="5"> Checkbox 5</div>
<div><input type="submit" name="submit" value="Отправить"></div>
</form>
JavaScript-функция для управления checkbox`ами
function checkboxes_sel_all(obj)
  {
  // Получаем NodeList дочерних элементов input формы:
  var items = obj.form.getElementsByTagName("input"), len, i;
 
  for (i = 0, len = items.length; i < len; i += 1)
    {
    // Если текущий элемент является чекбоксом
    if (items.item(i).type && items.item(i).type === "checkbox")
      {
      if (obj.checked)
        {
        // Устанавливаем отметки всем чекбоксам
        items.item(i).checked = true;
        }
      else
        {
        // Иначе снимаем отметки со всех чекбоксов:
        items.item(i).checked = false;
        }      
      }
    }
  }

Инверсионная пометка checkbox

Этот пример позволяет отмечать галочками только те поля, которые не были отмечены вручную, галочки выставленные вручную будут сняты. Попробуйте отметить Checkbox 1 и Checkbox 3 и понажимать "Инверсионно выделить/снять все галочки с чекбокс ов".

Инверсионно выделить/снять все галочки с чекбоксов
Checkbox 1
Checkbox 2
Checkbox 3
Checkbox 4
Checkbox 5
HTML-форма с checkbox - инверсия
<div style="padding-bottom: 10px;"><input type="checkbox" name="set" onclick="checkboxes_sel_inversion(this)"> Инверсионно выделить/снять все галочки с чекбоксов</div>
<div><input type="checkbox" name="item_id[]" value="1"> Checkbox 1</div>
<div><input type="checkbox" name="item_id[]" value="2"> Checkbox 2</div>
<div><input type="checkbox" name="item_id[]" value="3"> Checkbox 3</div>
<div><input type="checkbox" name="item_id[]" value="4"> Checkbox 4</div>
<div><input type="checkbox" name="item_id[]" value="5"> Checkbox 5</div>
<div><input type="submit" name="submit" value="Отправить"></div>
JavaScript-функция для управления checkbox`ами - инверсия
function checkboxes_sel_inversion(obj)
  {
  // Получаем NodeList дочерних элементов input формы:
  var items = obj.form.getElementsByTagName("input"), len, i;
 
  for (i = 0, len = items.length; i < len; i += 1)
    {
    // Если текущий элемент является чекбоксом...
    if (items.item(i).type && items.item(i).type === "checkbox")
      {
      // Вариант инверсии выбора            
      if (items.item(i).checked === false)
        {
        items.item(i).checked = true;
        }
      else
        {
        items.item(i).checked = false;
        }
      }
    }
  }

Чтобы добавить функцию на JavaScript в тело HTML-страницы используйте теги:

<script type="text/javascript">
... Код на JavaScript
</script>
Опубликовано: 2014/07/18
HTML-код ссылки на эту страницу:
<a href="http://petrenco.com/javascript.php?txt=181" target="_blank">Как отметить все галочки в форме</a>
3992
Добавить комментарий
Ваш e-mail: (не виден посетителям сайта)
Ваше имя:
Комментарий:
Символы с картинки:
Только выделенные поля формы добавления комментариев обязательны к заполнению.