Question

I am facing a strange behaviour in jQuery 1.4 with the click event. The idea is to click on a drop-down list (change()), which then invert twice a collection of checkboxes by using the click() function of them.
If I have to do so it is because the click on checkboxes update other fields, so I thought instead of inverting the checkboxes checked attribute, let’s just call twice the click on all checkboxes.

Although all the checkboxes are correctly inverted twice, the .length I’m using on the click function looses the right count during the operation, and everytime returns 1 more than it should.

To make it clear here’s the idea of the code:

//The 'click' function
$('input:checkbox').click(function(){
    $(this).parent().find("input:checkbox:checked").length;//<- this one's not returning the right count
    //some code updating other fields thanks to the 'length' of the checkboxes
});

//The dropdown function
$('select.dropdown').change(function(){
    $(this).parent().find("input:checkbox").click();//Invert the first time
    $(this).parent().find("input:checkbox").click();//Invert a second time
});

When I manually check and uncheck the fields, everything’s working perfectly, it’s just when the dropdown call it that the length count is wrong.

Here are 2 scenarios to explain even more in depth the issue I’m experiencing:

1. If I choose something from the dropdown (the length fails) and then uncheck and recheck a checkbox, the count is right.
2. If I add a buggy code at the end of the click() function, it works fine except raising an error on the javascript debugger console. Btw, I cannot keep this solution because another function fails in this case.

Cheers,
Nicolas.

Answer 1

If you want to invert the checked state of a checkbox, you can do this:

$(this).parent().find("input:checkbox").attr('checked', function(i, sel) {
    return !this.checked;
});

Note that calling .find("input:checkbox").attr(... will invert all the checkboxes. So if you call it twice, they will be inverted twice, giving you the appearance that nothing happened.

---

EDIT:

If the point is that you just want to trigger the handler, you can use .triggerHandler() which will trigger the click without triggering the default behavior of the element.

$(this).parent().find("input:checkbox").triggerHandler('click');

http://api.jquery.com/triggerhandler/