Как пометить заголовок классом если все чекбоксы ниже включены?
Ребята, помогите пожалуйста, мне нужно сделать такую несложную программку на 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, время: 21:53. |