Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.10.2011, 21:11
Аватар для МаринаКрутакова
Новичок на форуме
Отправить личное сообщение для МаринаКрутакова Посмотреть профиль Найти все сообщения от МаринаКрутакова
 
Регистрация: 09.10.2011
Сообщений: 3

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

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

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


Помогите пожалуйста
Ответить с цитированием
  #2 (permalink)  
Старый 09.10.2011, 22:26
Аватар для МаринаКрутакова
Новичок на форуме
Отправить личное сообщение для МаринаКрутакова Посмотреть профиль Найти все сообщения от МаринаКрутакова
 
Регистрация: 09.10.2011
Сообщений: 3

Кто-нибудь?
Ответить с цитированием
  #3 (permalink)  
Старый 09.10.2011, 23:08
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

//вешаем обработчик на каждый чек бокс внутри .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:32.
Ответить с цитированием
  #4 (permalink)  
Старый 09.10.2011, 23:27
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

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

Последний раз редактировалось DjDiablo, 09.10.2011 в 23:40.
Ответить с цитированием
  #5 (permalink)  
Старый 09.10.2011, 23:47
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

т.к. 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>
Ответить с цитированием
  #6 (permalink)  
Старый 09.10.2011, 23:51
Аватар для МаринаКрутакова
Новичок на форуме
Отправить личное сообщение для МаринаКрутакова Посмотреть профиль Найти все сообщения от МаринаКрутакова
 
Регистрация: 09.10.2011
Сообщений: 3

Спасибочки!!
Ответить с цитированием
  #7 (permalink)  
Старый 10.10.2011, 00:21
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,470

А МаринаКрутакова на самом деле хитрый мужичок, в очередной раз нае*й одиноких программистов.)
__________________
29375, 35
Ответить с цитированием
  #8 (permalink)  
Старый 10.10.2011, 00:38
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

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

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

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

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

Последний раз редактировалось DjDiablo, 10.10.2011 в 00:52.
Ответить с цитированием
  #9 (permalink)  
Старый 10.10.2011, 07:32
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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

спасибо)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Баги Opera пишем сюда devote Оффтопик 101 08.08.2013 05:56
Название ячейки таблицы Questioner Общие вопросы Javascript 6 16.02.2011 09:58
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37
Как вызвать функцию если менять надо не все параметры? britanik Общие вопросы Javascript 3 07.03.2009 23:13