IE jquery takes two clicks to work

Question

I am trying to setup a checkbox that checks all the child checkboxes, like a tree view. The following codes works great in Firefox and Chrome but in IE, it takes two clicks to get it to work. What am I missing?

HTML

<input type="checkbox" name="org" value="orgs" id="orgs" />
<label for="All">Organizations</label>

<ul id="orglist">
    <li>
            <input type="checkbox" name="org" value="1" id="1" />
            <label for="1">Org 1</label>
    </li>
    <li>
            <input type="checkbox" name="org" value="1" id="2" />
            <label for="2">Org 2</label>
    </li>
</ul>

Javascript/Jquery

$(document).ready(function () {
    $("#orgs").change(function () {

        if ($(this).attr("checked")) {
            $("#navform #orglist :checkbox").attr("checked", true);
        }
        else {
            $("#navform #orglist :checkbox").attr("checked", false);
        }
    });
});

This isn't something with the IE "click to activate" "security option" MS added, is it? — Andir, Jul 13 '10 at 00:46
Which version of IE is this affecting? works in IE8 here: http://jsfiddle.net/BX22n/ — Nick Craver, Jul 13 '10 at 00:47
@Nick: probably 7 or below. IE8 fixed some issues with checkbox state. — NotMe, Jul 13 '10 at 00:55
Not related but I think $(this).attr("checked") can be changed to just this.checked using DOM directly without jQuery selecting again. — airmanx86, Jul 13 '10 at 02:25

score 1 · Answer 1 · edited Nov 19 '11 at 20:42

1

For me the problem was I was just using checked and not checked="checked". Dumb mistake, but hopefully that helps someone.

edited Nov 19 '11 at 20:42

animuson

53,861
28
137
147

answered Apr 20 '11 at 14:04

Matt

11
1

score 0 · Answer 2 · answered Jul 13 '10 at 00:46

0

Most likely the state of a checkbox is in doubt for IE. Try setting the checked property to false or whatever on initial page load. For example:

<input type="checkbox" name="or" value="1" id="1" checked="false" />

answered Jul 13 '10 at 00:46

NotMe

87,343
27
171
245

score 0 · Answer 3 · answered Jul 13 '10 at 03:09

0

Instead of looking for an attribute, let jQuery do more work:

if ($(this).is(":checked")) {
    $("#navform #orglist :checkbox").attr("checked", "checked");
}
else {
    $("#navform #orglist :checkbox").removeAttr("checked");
}

answered Jul 13 '10 at 03:09

a7drew

7,801
6
38
39

Actually this should be `$("#navform #orglist :checkbox").attr("checked", this.checked);` if anything (or a `.each()`), don't let jQuery do "more work" use the faster DOM properties if available, generally speaking `$(this).is(":checked")` is extremely wasteful. [There are other cases this applies as well](http://stackoverflow.com/questions/3230727/jquery-optimization-best-practices/3230788#3230788) – Nick Craver Jul 13 '10 at 10:25
I'm still learning about jQuery optimization. What aspect is wasteful here? Is it in terms of milliseconds to perform the action and/or is it in terms of memory or computations necessary? Can you point me to some actual measurements? – a7drew Jul 13 '10 at 16:10

IE jquery takes two clicks to work

3 Answers3