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

Javascript: checkbox выбрать всё Visit link
04 Oct / 2013
Рубрика: Веб верстка


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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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 - кода формы:
1
2
3
4
5
6
7
8
9
10
<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>
 
 
 

Источник http://www.php-zametki.ru/javascript-laboratoriya/76-checkbox-vybrat-vsyo.html


/// Оставить комментарий

Copyright 2011-2016. Alenna's portfolio Копирование материалов с сайта незаконно.