chekbox click creating an issue?

<ul class="sorting" id="filter_by"> 
   <li><input checked="checked" type="checkbox" id="foobar" /><label for="chk1">foobar</label></li> 
   <li><input checked="checked" type="checkbox" id="foobaz"/><label for="chk2">baz</label></li> 
   <li><input checked="checked" type="checkbox" id="foofoo"/><label for="chk3">foo<开发者_如何学运维;/label></li> 
</ul>

I want to know how many checkbox are checked. SO I wrote:

$("#filter_by").change(function() {
    alert('hi');
    var len_checked = $("#filter_by > li > input:checked").length;
 });

But Every Time It call for twice. So, alert run two time. Suppose at first all three are checked Now I unchecked one element. Then alert run twice. I could find the reason?

You should bind the .change handler to the checkboxes, and not the UL:

$("#filter_by :checkbox").change(function() {
    alert('hi');
    var len_checked = $("#filter_by > li > input:checked").length;
});

You can try it here.

That said, I cannot duplicate what you have reported, at least not on Chrome with the code you posted, so something else could be causing this. Is there any relevant detail you have left out?