jQuery - Programmatically triggering a click() event?

Question

JavaScript

There is a hierarchical list of categories, presented as an unordered UL-LI list with checkboxes. This kind:

<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>

The task is such that when you click on the third checkbox (cell phones), the top two categories should also be automatically “checked in”, since they are parental to the clicked one.
I do click tracking and parent category clicks with the following jQuery code:

$(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>

The code works great in the sense that it actually ticks the parent categories as well. But the problem is that when the click() event is called programmatically, the code $(this).attr('checked')somehow returns false , while the mark is actually being made; and vice versa, returns true , while the check is actually unchecked.

Why so?

Answer 1

You need to check on the onChange event, since it occurs after a click.

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

Answer 2

First, your html is not correct, ul cannot be nested in ul. You need to nest ul in li
Secondly, if you click on the label, and not on the checkbox, then the checkbox will be set, but click will not be called.
In general, I see two solutions:
1. If you want to use checkboxes: hang a handler on change, and then go through the parents (when you fix the html, it will be easier to do this) and put down the checked
2 attribute everywhere. If you want to use click, you will have to abandon the checkbox and use some kind of styling (for example, draw a picture of a check mark to the left of the text, and put a mark in a hidden field ), and hang the click handler on li. In this case, you do not have to use any program calls to click, but will manage with the usual bubbling, i.e. the click event itself will be called on all parent elements in turn (again, for this you will have to normalize the html)

Answer 3

To all the above comments: it's better to use $().prop('checked', true || false) rather than attr().

Answer 4

This explanation immediately suggests itself - when you programmatically call a click on a checkbox, you only call the corresponding handler, without changing the value of the checked attribute, which you access via $(this).attr('checked').

Answer 5

Don't trigger a click, put the attribute $('#c2').attr('checked', true);

Answer 6

First, we need to fix the html code. Nested uls must be inside li. Javascript would be something like this:

$('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

and how to click on the radiobutton in jquery if it is styled and the check is in the background?