Иногда хочется изменить вид чекбоксов, что бы они подходили к дизайну, но через css невозможно сделать это кроссбраузерно. Здесь поможет jQuery. Суть скрипта проста. Сначала мы заключаем чекбокс в span. После скрываем сам чекбокс путём уменьшения прозрачности, при этом сам чекбокс остаётся полностью функциональным. К span’у добавляем нужный фон, который будет меняться при клике на невидимый чекбокс.
Вот собственно код:
Code
jQuery(function(){
$('input:checkbox').css('cursor','pointer').each(function(){
//Устанавливаем ширину и высоту чекбокса для осла
$(this).css({width:'13px',height:'13px'});
//Добавляем span в качестве родителя чекбокса
$(this).wrap('<span class="cb"></span>');
//Добавляем к span'у фон
$(this).parent('.cb').css({background:'url(checkbox.png)'});
//Если чекбокс выбран, то его фон тоже меняется
$(this+':checked').parent('.cb').css({background:'url(checkbox.png) -14px 0'});
//Делаем чекбокс прозрачным и убираем отступ
$(':checkbox').css({opacity:'0',margin:'0'});
//При клике на чекбокс меняется фон
$(this).parent('.cb').click(function(){
if ($(this).find('input:checked').val() !== undefined) {
//Фон отмеченного чекбокса
$(this).css({background:'url(checkbox.png) -14px 0'});
}else{
//Фон не отмеченного чекбокса
$(this).css({background:'url(checkbox.png)'});
}});
});
});
Код полностью кроссбраузерный.
