Как пометить заголовок классом если все чекбоксы ниже включены?
Ребята, помогите пожалуйста, мне нужно сделать такую несложную программку на jQuery. У меня есть чекбоксы сидящие в списке li. А выше них заголовочек и нужно сделать так чтобы когда все чекбоксы включили, то заголовочек пометить классом (там особый дизайн к нему применится).
А если хотя бы один из них отключили, то и у заголовка убрать класс снова. <h2>title <div class="steps"> <ul> <li> <label> <input type="checkbox"> <li> <label> <input type="checkbox"> <li> <label> <input type="checkbox"> Помогите пожалуйста :write: |
Кто-нибудь? :)
|
//вешаем обработчик на каждый чек бокс внутри .steps
$(".steps").find("input[type='checkbox']").click(function(){
// заводим себе счётчик чек боксов
var result=0;
// перебираем в цикле все чек боксы
$("div.steps").find("$(input[type='checkbox']").each(function(){
//считаем чек боксы с установленными галочками
if(this).prop('checked')==true) result++;
});
// если количество активных чек боксов равно какому то количеству (сейчас 4), тогда добавляем класс
if (result ==4) $("h2").addClass("osobenniyClass");// вместо h2 лучше по id обрашаться
else removeClass("osobenniyClass")
});
Код непроверял, кому не лень поправьте ошибки если есть :) а я баиньки) |
Ещё мысля пришла, только покороче.
$(".steps").find("input[type='checkbox']").click(function(){
if($(".steps input").not(':checked').length >0) $("h2").removeClass("osobenniyClass");
else $("h2").addClass("osobenniyClass");
}
|
т.к. html выложен коряво, то код написан с опорой на этот html
var
cont = $("div.steps"),
chxes = $("input:checkbox", cont), // чекбоксы
res = cont.prev("h2"), // чему будем давать класс
cls = "ok"; // имя класса
chxes.click(function(e){
res[ (!chxes.not(":checked").length?"add":"remove")+"Class" ](cls);
});
<style>.ok { border:3px green solid }</style>
<h2>title</h2>
<div class="steps">
<input type="checkbox"><input type="checkbox"><input type="checkbox">
</div>
<script src="http://yandex.st/jquery/1.6.4/jquery.min.js"></script>
<script>
var
cont = $("div.steps"),
chxes = $("input:checkbox", cont),
res = cont.prev("h2"),
cls = "ok";
chxes.click(function(e){
res[ (!chxes.not(":checked").length?"add":"remove")+"Class" ](cls);
});
</script>
|
Спасибочки!! :)
|
А МаринаКрутакова на самом деле хитрый мужичок, в очередной раз нае*й одиноких программистов.)
|
res[ (!chxes.not(":checked").length?"add":"remove")+"Class" ](cls);
Фига ты макс выдал )) Собрать название свойства исходя из условия :) Причём не просто выбрать название, а выбрать только его половину, а вторую прибавить. В самом деле зачем вторую половину названия писать дважды, это же лишний код )))))) Креативно, и неожиданно )) Лови плюс. Цитата:
|
)))) старый трюк.
спасибо) |
| Часовой пояс GMT +3, время: 11:52. |