Крассивые HTML чекбоксы
Захотелось мне что бы на Bankomap были не чекбоксы не стандартного вида, но делающие тоже самое и максимально прозрачно/стандартно.
Поиски в гугле большого результата не дали. Все варианты требовали либо лишнего, на мой взгляд html, либо лишнего js. Из-за чего и решил попробовать реализовать что-то свое.
И так: html + css + js(jQuery)
Покажу сразу на примере (мне кажется что объяснять как работает не нужно если увидеть пример):
HTML
<label class="checkbox"><input type="checkbox" />checkbox 1</label>
<label class="checkbox"><input type="checkbox" />checkbox 2</label>
<label class="checkbox"><input type="checkbox" />checkbox 3</label>
CSS
label.checkbox {
/* your style */
}
label.checkbox:hover {
cursor: pointer;
}
label.checkbox input {
display: none;
}
label.checkbox.checked {
/* style for checked checkbox */
}
JavaScript
$('label.checkbox').click(function (){
var el = $(this);
var checkbox = el.find('input:checked');
if (checkbox.length > 0) {
el.addClass('checked');
} else {
el.removeClass('checked');
}
});
Пример работы можно посмотреть на http://bankomap.org.ua/