Javascript: checkbox выбрать всё

Javascript: checkbox выбрать всё

Частенько в скриптах, обслуживающих html — формы требуется функциональный checkbox, который реализует задачу "Выбрать всё". Я написал для себя подобную функцию, которая не использует Jquery, рад предложить её и вам. В этой функции конечно используется цикл для обхода чекбоксов, но обход ограничивается только дочерними элементами формы, в котором расположен checkbox "Выбрать всё".

Здесь как всегда: только одна глобальная переменная — это название функции: checkAll(obj) ей передаем ссылку на элемент, который вызывает функцию: this Этот скрипт можно поместить в любое место на странице, а обработчик события можно навесить прямо в html элементе (я конечно против этого, но здесь это сделано, что бы не усложнять код примера)

Checkbox выбрать всё пример

Checkbox выбрать всё без Jquery

 

<script type="text/javascript">

function checkAll(obj) {

  'use strict';

  // Получаем 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") {

      // Дальше логика простая: если checkbox "Выбрать всё" - отмечен           

      if (obj.checked) {

        // Отмечаем все чекбоксы...

        items.item(i).checked = true;

      } else {

        // Иначе снимаем отметки со всех чекбоксов:

        items.item(i).checked = false;

      }      

    }

  }

}

</script>

Пример html — кода формы:

 

<form>

  <p><input id="one" type="checkbox" name="one" value="all" onclick="checkAll(this)" /><label for="one">Checkbox All</label></p>

  <p><input id="one1" type="checkbox" name="one1" value="1" /><label for="one1">Checkbox 1</label></p>

  <p><input id="one2" type="checkbox" name="one2" value="2" /><label for="one2">Checkbox 2</label></p>

  <p><input id="one3" type="checkbox" name="one3" value="3" /><label for="one3">Checkbox 3</label></p>

  <p><input id="one4" type="checkbox" name="one4" value="4" /><label for="one4">Checkbox 4</label></p>

  <p><input id="one5" type="checkbox" name="one5" value="5" /><label for="one5">Checkbox 5</label></p>

  <p><input id="one6" type="checkbox" name="one6" value="6" /><label for="one6">Checkbox 6</label></p>

  <p><input id="one7" type="checkbox" name="one7" value="7" /><label for="one7">Checkbox 7</label></p>

</form>

 

Возможно Вас заинтересуют эти материалы

Javascript выпадающий список

Часто на форумах втречаются вопросы как сделать динамический Javascript выпадающий список? Да ещё с возможностью

Javascript динамическая html таблица

Понадобилось мне в одном проекте на днях сделать html таблицу, которую бы выводил серверный php

Свои события или observer на Javascript

В этой статье, я по сути "убил двух зайцев" - Написал интересный и полезный Javascript