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>