Изменение оформления checkbox: переключение на jQuery

Продолжая разработку продвинутого «Щолгательного интерфейса» мы столкнулись с трудностями оформления checkbox, которые решили с помощью label. Следующая задача подразумевает сделать наши checkbox рабочими и каким либо образом отобразить статус checked. Для этого мы обратимся к ответственному за переключение jQuery.

Как обычно, перед тем, как приступить к решению подобной задачки, нужно немного разобраться в корнях проблемы. Во первых, за переключение [выбрано\не выбрано] у <input type="checkbox" /> отвечает атрибут checked. При этом он может иметь формат записи просто «checked» для HTML и «checked="checked"» для xHTML.

<input type="checkbox" checked>
<input type="checkbox" checked="checked">

Обе записи эквивалентны, но мы воспользуемся иксовым вариантом т.к. проставлять значение атрибута — это не просто хороший тон, но и дополнительное удобство в навеске функционала или CSS стилей.

Кстати, вы наверное спросите, «А почему мы используем так много CSS для скрытия checkbox?». Дело в том, что поставив просто display:none мы фактически выгрузим элемент из объектной модели и в некоторых браузерах не сможем манипулировать атрибутами. Поэтому мы сжимаем оформление checkbox до минимума чтобы он не раздвигал метки, и выкидываем за пределы видимости. При этом элемент загружен и с ним можно работать.

form input[type="checkbox"] {
  /*[hide]*/
    position: relative;
    left: -9999px;
    height: 1px;
    border: 0; 
    width: 1px;
}

Наша разметка тоже немного изменилась. Мы будем использовать стандартное оборачивание <input type="checkbox"> в метки т.к. это более семантически правильно и более удобно в работе.

<label class="opt effect1" for="check1">Option 1 
  <input id="check1" type="checkbox" />
</label> 

Далее, чтобы наверняка checkbox переключались мы напишем коротенькую функцию на jQuery. Точнее, просто перепишем предыдущий вариант.

$(function(){
// Onclick set & unset freeze class to stop background position; 
// Watch checked status 
$('.opt input').change(
function() {
  if ( $(this).is(':checked') ) {    
    $(this).parent().addClass('act');        // set class
    $(this).attr('checked', true);             // set checked
 
  } else {
    $(this).parent().removeClass('act');  // unset class
    $(this).attr('checked', false);          // unset checked
 
  }
}
);
});  

При загрузке документа к моменту готовности DOM функция по клику на элементе label проверит не выбран ли checkbox( $(this).is(':checked') ) и добавит или удалит атрибут checked="checked". Обратите внимание, что в данном примере доминирующим селектором выступает класс метки с указателем на вложенный input. Это удобно.

Теперь наши checkbox достойно оформлены и работают в любых ситуациях, за исключением отсутствия в браузере поддержки JS. Но это в настоящее время мало актуально.

Рабочий пример доступен для изучения.

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

Музяка к посту о checkbox