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, мы меняем его состояние на состояние управляющего чекбокса.

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