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>
Информация копипастерам
Внимание! Копирование контента с сайта, возможно только с разрешения администратора. Т.е. Меня! Я скорее всего разрешу Вам это сделать, в обмен на живую ссылку, на статью оригинал.