Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как пометить заголовок классом если все чекбоксы ниже включены? (https://javascript.ru/forum/jquery/22189-kak-pometit-zagolovok-klassom-esli-vse-chekboksy-nizhe-vklyucheny.html)

МаринаКрутакова 09.10.2011 21:11

Как пометить заголовок классом если все чекбоксы ниже включены?
 
Ребята, помогите пожалуйста, мне нужно сделать такую несложную программку на jQuery. У меня есть чекбоксы сидящие в списке li. А выше них заголовочек и нужно сделать так чтобы когда все чекбоксы включили, то заголовочек пометить классом (там особый дизайн к нему применится).
А если хотя бы один из них отключили, то и у заголовка убрать класс снова.
<h2>title
<div class="steps">
<ul>
<li>
<label>
<input type="checkbox">

<li>
<label>
<input type="checkbox">

<li>
<label>
<input type="checkbox">


Помогите пожалуйста :write:

МаринаКрутакова 09.10.2011 22:26

Кто-нибудь? :)

DjDiablo 09.10.2011 23:08

//вешаем обработчик на каждый чек бокс внутри .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")
});


Код непроверял, кому не лень поправьте ошибки если есть :) а я баиньки)

DjDiablo 09.10.2011 23:27

Ещё мысля пришла, только покороче.
$(".steps").find("input[type='checkbox']").click(function(){
      if($(".steps input").not(':checked').length >0) $("h2").removeClass("osobenniyClass");
      else $("h2").addClass("osobenniyClass");
}

melky 09.10.2011 23:47

т.к. 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>

МаринаКрутакова 09.10.2011 23:51

Спасибочки!! :)

Aetae 10.10.2011 00:21

А МаринаКрутакова на самом деле хитрый мужичок, в очередной раз нае*й одиноких программистов.)

DjDiablo 10.10.2011 00:38

res[ (!chxes.not(":checked").length?"add":"remove")+"Class" ](cls);

Фига ты макс выдал ))
Собрать название свойства исходя из условия :)
Причём не просто выбрать название, а выбрать только его половину, а вторую прибавить. В самом деле зачем вторую половину названия писать дважды, это же лишний код ))))))

Креативно, и неожиданно )) Лови плюс.

Цитата:

А МаринаКрутакова на самом деле хитрый мужичок, в очередной раз нае*й одиноких программистов.)
жесть ))

melky 10.10.2011 07:32

)))) старый трюк.

спасибо)


Часовой пояс GMT +3, время: 21:53.