13

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 to do some tree-based checkbox operations, and I've come accross some behavior that I find strange.

In Google Chrome, I find that checking a checkbox leaves some "residue", if you will, that will not allow me to check or uncheck that checkbox using "attrRemove('checked');"

Interestingly enough, Internet Explorer (9) has the result I am going for. Please see this jsFiddle in both Chrome and IE for a good comparison of the effects.

http://jsfiddle.net/xixionia/9K5ft/

Can anyone explain these difference, and how I might be able to check / uncheck a checkbox in chrome which has been checked "by hand" ?

HTML

<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />

JavaScript

$(':checkbox').click(function(e) {

    if($(this).is(':checked')) {
        $(':checkbox').attr('checked', 'checked');
    } else {
        $(':checkbox').removeAttr('checked');
    }
});

Thanks in advance for your help. :)

edit:

I was able to find this work around. If anyone else has any other solutions, please let me know, and I'll mark it as the solution. :)

$(':checkbox').click(function(e) {
    var value = this.checked;
    $(':checkbox').each(function(){ this.checked = value; });
});

edit:

Turns out, this problem is specific to jQuery 1.6. Previous versions of jQuery do not suffer from this issue. However, I have posted a solution here: Setting "checked" for a checkbox with jQuery?

Community
  • 1
  • 1
cwharris
  • 17,835
  • 4
  • 44
  • 64
  • 1
    Re `if($(this).is(':checked'))`: Try just `if(this.checked)`. No need for all those function calls and string parsing. Details: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-30233917 – T.J. Crowder May 06 '11 at 06:40
  • 1
    FYI: Same problem is in Firefox 4. After the checkbox got checked once, it doesn't work anymore. – Tim May 06 '11 at 06:41
  • Here you have an explanation of why it fails in jQuery 1.6: http://edgarinvillegas.wordpress.com/2011/05/10/upgrading-to-jquery-1-6-troubleshooting/ – Edgar Villegas Alvarado Apr 24 '12 at 13:17

4 Answers4

9

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 .

BernardMarx
  • 916
  • 8
  • 17
  • 1
    Setting the checked value manually via JavaScript was works flawlessly. Thank you! – cwharris May 06 '11 at 07:19
  • could you please jsfiddle the answer (Setting the checked value manually via JavaScript)? – 6339 Jun 10 '13 at 09:10
  • "jsfiddle" of sorts: `$('foo')[0].checked=true` - assuming you are certain to have precisely one node in your selector, otherwise refert to `get()` – Frank N Sep 12 '13 at 17:15
5

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.

Yong Lee
  • 148
  • 2
  • 7
1

Instead of this:

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

You should do this:

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

Cheers

Edgar Villegas Alvarado
  • 18,204
  • 2
  • 42
  • 61
0

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;
        });
    }
});
Drilla
  • 3
  • 2
user3403202
  • 1
  • 1