Вход

Просмотр полной версии : кастомизация чекбоксов

ogurchik
19.05.2015, 18:11
Нужно сделать чекбоксы "красивыми".
На лейбл, в которых лежат чекбоксы, прикрепляется класс "checkbox-checked" в котором картинка с отмеченным чекбоксом. Так на лейбле на бекграунде стоит картинка пустого чекбокса.
вторая цепочка методов не работает как надо, если нажать на чекбокс, то класс "checkbox-checked" снимается со всемх чекбоксов, и присвается тому чекбоксу, на который был произведен клик. если чекбокс уже был отмечен, то класс снимается и с него тоже.
$(window).load(function() {
//проверяет при загрузке страницы, отмечен чекбокс или нет и на отмеченные чекбоксы вешает класс.
$('input[type="checkbox"]').each(function () {
if ($(this).prop('checked')) {
$(this).parent().addClass('checkbox-checked');
}
});

//по клику лейблу присваивается или удаляется класс, в зависимости от того, что в атрибуте "checked".
$('input[type="checkbox"]').bind("change", function(){
if ($(this).is(":checked")) {
$(this).parent('label').addClass('checkbox-checked');
}
else {
$(this).parent('label').removeClass('checkbox-checked');
}
});
как я понимаю, проблема во всплытии событий, но уверенности нет. подскажите, в чем проблема, как ее можно устранить? как найти по ней инфу? заранее за помощь большая благодарность.
рони
19.05.2015, 18:30
ogurchik,
html минимальный где?
ogurchik
20.05.2015, 10:53
<label class="checkbox-checked"><input type="checkbox" checked="true"/>один</label>
<label><input type="checkbox"/>два</label>
<label><input type="checkbox"/>три</label>
<label class="checkbox-checked"><input type="checkbox" checked="true"/>четыре</label>
рони
20.05.2015, 11:37
ogurchik,
видимо вы что-то не договаривате ... всё ок
в 1 посте пропущена строка 18
<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.checkbox-checked {
background: #FFCC00;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).load(function() {
//проверяет при загрузке страницы, отмечен чекбокс или нет и на отмеченные чекбоксы вешает класс.
$('input[type="checkbox"]').each(function () {
if ($(this).prop('checked')) {
$(this).parent().addClass('checkbox-checked');
}
});

//по клику лейблу присваивается или удаляется класс, в зависимости от того, что в атрибуте "checked".
$('input[type="checkbox"]').bind("change", function(){
if ($(this).is(":checked")) {
$(this).parent('label').addClass('checkbox-checked');
}
else {
$(this).parent('label').removeClass('checkbox-checked');
}
});
})

</script>
</head>

<body>
<label class="checkbox-checked"><input type="checkbox" checked="true"/>один</label>
<label><input type="checkbox"/>два</label>
<label><input type="checkbox"/>три</label>
<label class="checkbox-checked"><input type="checkbox" checked="true"/>четыре</label>



</body>

</html>
ogurchik
20.05.2015, 13:01
тогда наверное дело в чем-то еще в коде. спасибо.