S
Stanimir Stamenkov
I've observed the following quirk using Internet Explorer 6/7, given
the following sample document:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en-US">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=US-ASCII">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Check-All Test</title>
<script type="text/javascript">
function doToggle(state) {
var items = state.form.getElementsByTagName("input");
for (var i = 0; i < items.length; i++) {
var elem = items;
if ((elem != state) && (elem.type == "checkbox")) {
elem.checked = state.checked;
}
}
}
</script>
</head>
<body>
<form action="self">
<p>
<label for="toggle-items">
<input id="toggle-items" type="checkbox" onchange="doToggle(this);">
Toggle All</label></p>
<ul>
<li><label for="item-1">
<input id="item-1" type="checkbox" value="abc">
Value 1</label></li>
<li><label for="item-2">
<input id="item-2" type="checkbox" value="def">
Value 2</label></li>
<li><label for="item-3">
<input id="item-3" type="checkbox" value="ghi">
Value 3</label></li>
</ul>
</form>
</body>
</html>
When I toggle the "toggle-items" checkbox, the state of the other
checkboxes doesn't appear (at least visually) to be toggled. Then
if I click the mouse anywhere in the document the state of the
checkboxes gets "refreshed". Iteresting enough if I change the
'onchange' handler on the "toggle-items" box to 'onclick' I don't
get that problem. Is there anything potentially wrong with my usage
of the 'onchange' handler causing the given quirk? The other
browser I've tried - Mozilla 1.8.1.x (Firefox 2.0.x), Opera 9.2x and
Safari 3.1 (all on Windows) don't show such problem.
the following sample document:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en-US">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=US-ASCII">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Check-All Test</title>
<script type="text/javascript">
function doToggle(state) {
var items = state.form.getElementsByTagName("input");
for (var i = 0; i < items.length; i++) {
var elem = items;
if ((elem != state) && (elem.type == "checkbox")) {
elem.checked = state.checked;
}
}
}
</script>
</head>
<body>
<form action="self">
<p>
<label for="toggle-items">
<input id="toggle-items" type="checkbox" onchange="doToggle(this);">
Toggle All</label></p>
<ul>
<li><label for="item-1">
<input id="item-1" type="checkbox" value="abc">
Value 1</label></li>
<li><label for="item-2">
<input id="item-2" type="checkbox" value="def">
Value 2</label></li>
<li><label for="item-3">
<input id="item-3" type="checkbox" value="ghi">
Value 3</label></li>
</ul>
</form>
</body>
</html>
When I toggle the "toggle-items" checkbox, the state of the other
checkboxes doesn't appear (at least visually) to be toggled. Then
if I click the mouse anywhere in the document the state of the
checkboxes gets "refreshed". Iteresting enough if I change the
'onchange' handler on the "toggle-items" box to 'onclick' I don't
get that problem. Is there anything potentially wrong with my usage
of the 'onchange' handler causing the given quirk? The other
browser I've tried - Mozilla 1.8.1.x (Firefox 2.0.x), Opera 9.2x and
Safari 3.1 (all on Windows) don't show such problem.