JQuery — Программируемый вызов события click()?

Question

[Руслан Левиев]

Есть иерархический список категорий, представленный в виде ненумерованного списка UL-LI с чекбоксами. Такого вида:

<ul><br>
 <li><input type="checkbox" value="1" rel="c0" id="c1" class="category"/><label for="c1">Электроника</label></li><br>
 <ul><br>
  <li><input type="checkbox" value="2" rel="c1" id="c2" class="category"/><label for="c2">Телефоны</label></li><br>
  <ul><br>
   <li><input type="checkbox" value="3" rel="c2" id="c3" class="category"/><label for="c3">Сотовые телефоны</label></li><br>
  </ul><br>
 </ul><br>
</ul><br>

Задача такая, что при клике на третий чекбокс (сотовые телефоны) также должны автоматом «отметиться» и верхние две категории, поскольку они являются родительскими по отношению к нажатой.

Отслеживание нажатия и нажатие родительских категорий я выполняю следующим кодом на jQuery:

$(document).ready(function() {<br>
    $('.category').bind('click', function() {<br>
        var category_id = $(this).val();<br>
        var parent = $(this).attr('rel');<br>
     <br>
        if($(this).attr('checked')) {<br>
             window.categories.push = category_id;<br>
        }<br>
<br>
        if(parent != 'c0') $('#'+parent).click();<br>
    });    <br>
})<br>

Код работает прекрасно в том смысле, что он действительно ставит галочки и на родительских категориях. Но проблема в том, что при программном вызове события click() код $(this).attr('checked') почему-то возвращает false, тогда как отметка на самом деле производится; и наоборот, возвращает true, тогда как отметка на самом деле снимается.



Отчего так?

Answer 1

[arbuzik]

Проверять нужно по событию onChange, так как оно происходит после клика.

$(".checkbox").bind("change",function(){
   if ($(this).is(":checked")) {
      // true
   }
})

Comments

[arbuzik]

Извините, не сразу понял суть вопроса. А зачем вы делаете программный вызов клик? Я думаю, правильнее будет делать

$('#'+parent).attr("checked","checked").trigger("change");

Ну а делать проверку так, как я писал выше

Answer 2

[Искандер Гиниятуллин]

Во-первых, у вас не правильный html, ul не может быть вложен в ul. Надо вкладывать ul в li

Во-вторых, если у вас кликнуть на label, а не на чекбокс, то галочка поставится, но click не вызовется

Вообще я вижу два варианта решения:

1. Если хотите использовать чекбоксы: повесить обработчик на change, и потом пройтись по родителям (когда вы поправите html это будет сделать проще) и везде проставить аттрибут checked

2. Если хотите использовать click то придется отказаться от checkbox и использовать какую-нибудь стилизацию (например рисовать картинку галочки слева от текста, а отметку ставить в скрытом поле), а обработчик click повесить на li. В таком случае вам не придется использовать никаких программных вызовов click, а обойдется обычным бабблингом, т.е. событие клик само по очереди вызовется у всех родительских элементов (опять же, для этого вам придется привести html в нормальный вид)

Answer 3

[Autorun]

Ко всем вышестоящим комментариям: лучше использовать $().prop('checked', true || false), а не attr().

Answer 4

[Макс Кузнецов]

Сходу напрашивается такое объяснение — при программном вызове клика по чекбоксу вы вызываете лишь соответствующий обработчик, не меняя значение атрибута checked, к которому вы обращаетесь через $(this).attr('checked').

Answer 5

[Dreddik]

Не вызывайте клик, ставьте аттрибут $('#c2').attr('checked', true);

Answer 6

[trueClearThinker]

Сначала, надо исправить html-код. Вложенные ul должны быть внутри li. Javascript будет примерно таким:

$('input').change(function() {
	if($(this).is(':checked'))
		$(this).parents('li').find('> input').removeAttr('checked');
	else
		$(this).parents('li').find('> input').attr('checked', 'checked');
});

Answer 7

[kievskiy_sergey]

а как нажать на радиобаттон в jquery если он стилизован и проверка идет в фоновом режиме?