JavaScript: отметить все чекбоксы (chekbox) без jQuery

Дорогие друзья, вот я и начал публиковать заметки о моей вебмастерской жизни. Проблема в том, что они получаются достаточно сухими, т.к. это они носят мануальный характер. А кому интересно читать всю эту документацию? Поэтому я и позволяю себя все эти лирические отступления.

JavaScript: отметить все чекбоксы (chekbox) без jQuery

Вот и в этот раз вместо того, чтобы рассказать вам о том, как отметить все чекбоксы в JavaScript я позволю себе посетовать на пагубное влияние библиотеки jQuery на неокрепшие умы веб программистов и просто любителей вроде меня. Как говорится: жить стало хорошо, жить стало веселее – но что-то явно не так. Не верите?

Я очень люблю библиотеку jQuery, как средство позволяющее не думать о кроссбраузерности написанных мной скриптов. Проблема в том, что jQuery 2.0 уже не поддерживает «популярные» браузеры Internet Explorer 6, 7 и 8. Несколько смущает и всё растущий объем библиотеки, хотя в 1.9 были урезаны многие полезные фишки. Про бездумный копипаст кода с многократной подгрузкой jQuery я вообще молчу. А если учесть, что для решения многих задач можно обойтись и без этого чуда в перьях… есть повод задуматься.

Вот и сегодня я заметил на одном своем сайте, что для решения простейшей задачи с отметкой всех чекбоксов я подгружал целую библиотеку jQuery. Конечно, выглядит это красиво и удобно, например:

<input type="checkbox" onclick="$('input:checkbox').attr('checked',this.checked)">

Чем не красота? Всего одна строчка, которую можно впихнуть в значение атрибута onclick. Да вот беда, к этому прилагается еще 91Кб кода, и это в сжатом виде! Конечно, при современных объемах гоняемого трафика, цифра не существенная, но тем не менее. Почему бы ни уменьшить объем этого кода до 1Кб и даже меньше? Есть задача пишем решение.

function checkAll(obj) {
  'use strict';
  var inputs = obj.form.getElementsByTagName("input");
  for ( var i = 0; i < inputs.length; i++ )
    if ( (inputs.item(i).type) && (inputs.item(i).type==="checkbox" ) )
      inputs.item(i).checked = obj.checked;
}

Этот шедевр является результатом идей и решений с десятка источников. Поверьте, он достоин того, чтобы уделить ему чуть больше внимания!

Но начну с того, что день сегодняшний приготовил для меня множество новых старых открытий, которыми я спешу поделиться и с вами. В частности, вы знаете, что JavaScript является расширением языка ECMAScript, детища ныне главного менеджера Mozilla Corpotation Брендана Айка (англ. Brendan Eich). Этот факт можно было бы опустить, но в моем коде присутствует специальная директива: 'use strict'; - которая была введена в пятой редакции ECMAScript для включения «строгого режима».

Дело в том, что современная спецификация языка содержит ряд серьезных изменений, по сравнению с предыдущими редакциями. Для того чтобы не «ломать» существующий код, эти изменения включаются соответствующей директивой, которая, к слову, не поддерживается в браузерах Internet Explorer младше 9 версии. Проще говоря, включив этот режим, можно проверить насколько ваш код соответствует высоким стандартам. Ничего сложного в этом нет, но все работает и это радует!

А работает мой скрипт так. Функции checkAll() передается объект управляющего чекбокса, например:

<form>
<input type="checkbox" onclick="checkAll(this)" >

<input type="checkbox" >
<input type="checkbox" >
</form>

Переменной inputs передаются элементы тегов input входящие в состав секции form управляющего чекбокса. Далее мы перебираем полученные элементы, используя метод item(), и проверяем их тип, т.е. значение атрибута type. Если тип инпута равен checkbox, мы меняем его состояние на состояние управляющего чекбокса.

Как вы видите, ничего сложного здесь нет, но с учетом некоторых деталей у нас получилась, надеюсь, поучительная и полезная история в виде мануальной статьи. На этом у меня всё. Спасибо за внимание. Удачи!

Twitter Facebook ВКонтакте Одноклассники Google+

4 комментария:

Александр Кувшинников
На счет того, что статья получилась мануальной - согласен. Все это сделать можно только для чекбоксов? Или в других случаях тоже можно отказаться от jQuery?
Константин Кирилюк
@Александр Кувшинников jQuery это JavaScript библиотека, которая позволяет выполнять некоторые задачи визуально проще. Сравни пример кода jQuery и чистого JavaScript. В тоже время, если не нужно многообразие возможностей jQuery лучше остановиться на чистом JavaScript... имхо.
Никита Учителев
Ваш способ работает некорретно в случае вложенных форм. У меня примерно такая ситуация:


Текст
Название



....




В такой ситуации ваш чекбокс проставляет галочку в чекбоксах text и title.

А также, если вашему чекбоксу проставить атрибут checked, то чтобы убрать все галочки нужно сначала галочку снять, а потом снова проставить, а потом опять снять. Не очень удобно.

Но вообще идея замечательная, спасибо
Константин Кирилюк
2Никита Учителев чтобы вставить код (те же знаки меньше < и больше >) на Blogger нужно использовать мнемоники (&lt; и &gt; соответственно), иначе будет резаться, но суть комментария я, думаю, понял. По пунктам:

1) По сути, вложенность форм это неправильно (например, в Firefox это прокатывает, а вот в IE и Opera нет), так что неправильные варианты я отбрасываю.

К слову, в примере учтено наличие на странице двух и более форм, здесь управляющий чекбокс действует только на дочерние чекбосы формы в которой он находится.

2) в приведённых функциях имеется проверка на тип тега checkbox, так что при правильном формате всё должно работать корректно... или я всё таки не уловил суть ситуации?

3) что до уже проставленного стрибута checked. Суть решения не в том чтобы сделать инверсию, а в том чтобы отметить все чекбоксы. Это вроде выполняется.

Пы.Сы. заметил ошибку у себя, переменна i не определена в for, исправил.
Отправить комментарий