jQuery Checkbox - стиль чекбоксов

Стандартный checkbox не особо поддается стилизации. Задействуем небольшой плагин для замены checkbox элементов на псевдо checkbox, с сохранением функциональной нагрузки.

Скачать плагин - по вопросам использования плагина обращайтесь по адресу wdtime@yandex.ru.

Задействуем плагин jQuery checkbox

$('[type=checkbox]').checkbox();

У плагина есть несколько стандартных настроек, которые можно поменять при вызове:

  • checkboxClass - класс для псевдо-чекбокс элементов
  • checkedClass - класс для псевдо-чекбоксов в состоянии "checked", т.е. отмеченные
  • labelClass - класс для лейблов

Например, так можно изменить название класса и лейбла со стандартного на кастомный.

$('[type=checkbox]').checkbox({checkboxClass:'class', labelClass:'label-class'});

Для того, чтобы плагин срабатывал по нажатию на лейбл, необходимо поместить каждый чекбокс внутри своего лейбла. Ну и, конечно же, необходимо прописать стили для псевдо чекбокса в состоянии по умолчанию и в отмеченном состоянии. Если вы используете стандартные настройки плагина, то стиль для псевдо чекбокса - checkbox, а в отмеченном состоянии элементу добавляется стиль check.

Манипуляция checkbox элементами средствами jQuery

Для того, чтобы отобрать все элементы с типом "checkbox", можно использовать селекторы $(":checkbox") или $("[type=checkbox]"). Оба селектора решают одну задачу, но имеют определенное отличие друг от друга. Давайте посмотрим на примере:

$('[type=checkbox]').eq(0).attr('checked','checked');

Таким образом, мы отбираем все элементы с типом checkbox и присваиваем первому из них атрибут checked, т.е. отмеченный.

Расширение ":checkbox" или "[type=checkbox]"

Селектор ":checkbox" - jQuery расширение, которое не является частью спецификации CSS. Запросы, использующие селектор ":checkbox" не могут обеспечить высокую производительность, по причине отсутствия возможности задействовать нативный метод DOM модели - "querySelectorAll", в отличие от селектора "[type=checkbox]", который такую возможность имеет. Нативный метод querySelectorAll, по определению, работает быстрее чем функция jQuery, решающая аналогичную задачу.

Синтаксис селектора ":checkbox"

var allCheckbox = $("selector:checkbox");

В качестве значения "selector" может выступать тег, класс или любой другой селектор. Если не указать селектор в явном виде, то будет применен селектор по-умолчанию "*" - все html-элементы страницы. Если указать конкретный селектор, то будет затрачено меньше времени на выполнение скрипта.

Синтаксис селектора "[type=checkbox]"

var allCheckbox = $("[type=checkbox]");

Сравнение производительности селекторов

Селектор ":checkbox" проигрывает ~70-100% производительности, в сравнении с селектором "[type=checkbox]".