Главная JavaScript

jQuery-плагин для стилизации чекбоксов

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина.

* * *

Чекбоксы

Как и обещал ранее, делюсь своим очередным jQuery-скриптом в виде плагина. Он предназначен для свободного оформления через CSS элемента формы, называемого чекбоксом (либо флажком, либо галочкой), т. е. тега <input type="checkbox" />.

Демонстрация работы плагина

Примеры можно посмотреть на отдельной странице.

Достоинства

  • При отключенном JavaScript отображается стандартный чекбокс, т. е. его работоспособность не теряется.
  • Работает и для динамически добавляемых/изменяемых чекбоксов.
  • Маленький размер скрипта (чуть больше 1 килобайта).
  • Легко поддается оформлению через CSS.
  • Умеет «ловить» нажатие клавиши Tab.
  • Поддерживает атрибут «disabled».
  • Кроссбраузерность.

Недостатки

  • Не обнаружено.

Скачать

Плагин недоступен, т.к. он уже не актуален.

jQuery-плагин «Checkbox Styler»

Версия: 1.1.2 | Загрузок: 2397 | Размер: 6 Кб | Последнее обновление: 07.10.2012

Обновления

23.08.2012
Все-таки удалось решить задачу с получением фокуса при клике на <label>. Теперь все работает полностью так, как и задумывалось. Кроме того, я переделал скрипт в плагин и добавил минимизированный вариант.
24.08.2012
Плагин теперь работает и с динамически добавляемыми/изменяемыми чекбоксами.
22.09.2012
Поменял метод prop () на attr (), чтобы добавлялся атрибут checked.
07.10.2012
Исправлено поведение скрипта при использовании метода onchange у тега <input type="checkbox" />.

Подключение плагина

  1. Если jQuery на сайте еще не подключен, то перед тегом </head> добавьте такую строку:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    
  2. Сразу после jQuery подключите плагин:

    <script src="ПУТЬ_К_ФАЙЛУ/jquery.checkbox.min.js"></script>
    
  3. Теперь задействуйте плагин:

    <script>
    (function($) {
    $(function() {
    
    	$('input.styled').checkbox();
    
    })
    })(jQuery)
    </script>
    

    Этот код поместите перед тегом </head> после вышеуказанных файлов.

    Соответственно, нужно добавить класс .styled (при желании можно поменять) тем чекбоксам, которые необходимо стилизовать:

    <input type="checkbox" class="styled" />
    
  4. При динамическом изменении у чекбоксов атрибутов checked и disabled необходимо запустить триггер refresh, например:

    (function($) {
    $(function() {
    
    	$('button').click(function() {
    		$('input.styled:first').prop('disabled', true).trigger('refresh');
    	})
    
    })
    })(jQuery)
    

HTML-код после выполнения плагина

Он будет выглядеть следующим образом:

<input type="checkbox" class="styled" style="position: absolute; left: -9999px" />
<span class="checkbox" style="display: inline-block"></span>

CSS-классы, используемые для оформления чекбокса

.checkboxчекбокс по умолчанию
.checkbox.checkedвыбранный чекбокс
.checkbox.disabledнеактивный (недоступный для выбора) чекбокс
.checkbox.focusedфокус на чекбоксе, когда нажата клавиша Tab

Комментарии (35)

  1. для динамически добавляемых чекбоксов можно было бы перезапускать скрипт. вам следовало бы проверить, как это будет работать, особенно для уже обработанных чекбоксов

    например, в niceforms (если правильно название помню), была возможность такой перерисовки

    • В будущем как-нибудь попробую с этим разобраться.

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

  2. Баг. В Вашем же примере в самом input не меняется значение checked.

  3. Скрипт немного сыроват, его нужно оформить в виду плагина, чтобы можно было выбирать элементы для манипуляций и вызывать функцию при любых событиях, сделать проверку на уже обработанный инпут, убрать эти бесконечные .next () и .prev (), ведь можно вынести в переменную создания спана-имитации и работать с ним, когда вешаете событие клик все эти $(this) тоже не красиво.

  4. Спасибо огромное за скрипт

  5. В виде плагина
    При клике мышкой выделения нет (кроме случая, когда input внутри label), при переходе через Tab есть.

  6. Дима, Спасибо!
    Ты как всегда радуешь элегантными решениями.
    Теперь есть повод немного приукрасить сайт)

  7. Сделал реализацию без картинок:

    var span = $('<span class="checkbox" style="display:inline-block"></span>');
    меняем на:
    var span = $('<span class="checkbox" style="display:inline-block">&#x2713;</span>');
    .checkbox {
    	width: 16px;
    	font: normal 14px/16px Tahoma, Arial, Helvetica, sans-serif;
    	height: 16px;
    	border: solid 1px #ccc;
    	-webkit-border-radius: 4px;
    	border-radius: 4px;
    	padding: 0;
    	margin-top: 3px;
    	color: #fff;
    	background: #fff;
    	text-align: center;
    	}
    	.checkbox.checked {			
    		color: #333;
    		}

    пример
    Ещё раз спасибо, что делаешь вещи, легко поддающиеся кастомизации.

  8. Для поиграться пойдет, для реальной работы на сайте нет.
    Подключаем ваш плагин, прописываем стили:

    Не работает, при нажатии на ссылку или checkbox внутри label. Снимаем плагин и все работает :).

  9. Вы меня удивляете))
    Я вам даже пример показал, где ваш плагин бессилен. Попробуйте в вашем же примере, который идет вместе с плагином, прописать:

    <a href="/test" rel="nofollow">Тест</a>

    Нажмите на ссылку тест, перейдет по ней?
    Если это работает, то вы волшебник.

  10. Или, конкретно пропишите в index. html в form:

    <label><input type="checkbox" class="styled" onclick="window.location='test'"><a href="test">Имя</a></label>

    При нажитии на чекбокс или ссылку, перехода по ссылке нет. Убираем class="styled", остается системный чекбокс, по ссылке переходит.

  11. Дмитрий здравствуйте, есть маленькие недочёты когда checkbox ловит фокус в разных браузерах ведёт себя по разному, вот код исправил для нормальной реализации в браузерах:

    .keydown(function(e) {
    				// чтобы переключался чекбокс, который находится в теге label
    				if((input.parent('label').length || input) && (e.which == 13 || e.which == 32)) span.click();
    				if(e.which != 9) return false;
    			})
    
    • А в чем заключается проблема с моим кодом, можно поподробнее? Я проверял в разных браузерах — у меня все в порядке.

      • Вообщем проблемма в IE когда Tab-ом переключаешься по флажкам то доходя до последнего который обёрнут в label он его отмечает очередным нажатием на Tab, а не переходит фокус дальше, и ещё отмечать пробелом и enter-ом невозможно было флажки которые не обёрнуты в label и обычные без него. И наблюдался двойной клик, чем и было исправлено подстановкой return false на Tab

  12. я кстати хотел все спросить, а может стоитт на github размещать плагины? тогда много кто при желании может код дорабатывать и отсылать тебе пулл реквест?

    • С последним плагином так и хотел поступить, но это оказалось для меня сложно. Я разобрался, как там разместить файлы, однако мне нужно было также, чтобы живые примеры можно было смотреть прямо с гитхаба, но так и не понял, как это делается. Поэтому забил на гитхаб.

  13. Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина.