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

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

* * *

jQuery-плагин для стилизации input[type=

Как и обещал ранее, делюсь своим очередным 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. 1
    @

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

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

    • 2

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

      • 3
        kotchuprik
        @

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

  2. 4

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

  3. 8
    makregistr

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

  4. 10
    Александр

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

  5. 11

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

  6. 15
    @

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

  7. 17
    @

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

    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. 19
    Игорь

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

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

  9. 21
    Игорь

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

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

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

  10. 23
    Игорь

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

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

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

  11. 25
    Роман

    Дмитрий здравствуйте, есть маленькие недочёты когда 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;
    			})
    
    • 26

      А в чем заключается проблема с моим кодом, можно поподробнее? Я проверял в разных браузерах — у меня все в порядке.

      • 27
        Роман

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

  12. 30
    Костя
    @

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

    • 31

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

  13. 35

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