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&g开发者_运维问答t;
</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);
}
});
});
For me the problem was I was just using checked
and not checked="checked"
. Dumb mistake, but hopefully that helps someone.
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" />
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");
}
精彩评论