jQuery, Chrome, and Checkboxes. Strange Behavior

Question

I\'ve looked around the site and can\'t seem to find an answer for this question. Feel free to direct me to said question, if it does indeed exist.

I\'m currently trying

Answer 1

From : http://api.jquery.com/prop/ you should be using prop instead of attr

Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does.

Answer 2

When working with checkboxes (especially complicated logic bases on checkboxes) I always try to avoid jQuery event handlers on the checkboxes. There is a bug in jQuery that has to do with the order of event triggering when clicking on checkboxes and the browser used: You can find a description of part of the problem here. A quote:

It seems that when you trigger the click event on a checkbox, the default behavior (toggling the checked attribute) takes place after event handlers fire. This is opposite of what happens when the browser naturally handles the checkbox click event - the checked attribute is toggled and then the event handlers are executed. This difference in the order of operations between inherent clicking and jQuery's event triggering can cause a big problem if the event handler depends on the status of checkbox in anyway (which, if you have a click handler on a checkbox to begin with means it probably does).

jQuery calls this a feature because it has been around since the beginning and changing it to the correct behaviour would just kill so many existing applications. I often had problems with checkboxes and "checked" just because the event was fired too late. So I just use the native JS way: input.checked .

Answer 3

Instead of this:

$(':checkbox').removeAttr('checked');

You should do this:

$(':checkbox').attr('checked', false);

Cheers

Answer 4

I was facing the same problem and solved using the following code in chrome. Hope it will help.

$("#allchkbox").click(function() {
    if(this.checked) {
        $(".ItemChkbox").each(function() {
            this.checked = true;
        });
    }
    else {
        $(".ItemChkbox").each(function() {
            this.checked = false;
        });
    }
});