CODEWITHSUNDEEP
jquerycheckboxclickdrop-down-menu
Nicolas
Nicolas

Reputation: 2814

jQuery strange behaviour on click() from a click()

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.

Upvotes: 1

Views: 1070

Answers (2)

belugabob
belugabob

Reputation: 4460

Assuming that the checkboxes and the dropdown share the same form, why not do this...

function countCheckedBoxes(theForm){
    theForm.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 'click' function 
$('input:checkbox').click(function(){ 
    countCheckedBoxes($(this.form));
}); 

//The dropdown function 
$('select.dropdown').change(function(){ 
    countCheckedBoxes($(this.form));
});

Then you aren't relying on handling click events in a nested manner(which I believe is the problem) and you are running the 'countCheckedBoxes()' function explicitly, instead of relying on a side-effect of the checkboxes being clicked.

Upvotes: 1

user113716
user113716

Reputation: 322502

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/

Upvotes: 2

Related Questions