Try this. I haven't tested it in non-Windows browsers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
</style>
<script type="text/javascript"><!--
/*
AddEvent Manager (c) 2005 Angus Turnbull http://www.twinhelix.com
Free usage permitted as long as this credit notice remains intact.
*/
if (typeof aeOL == 'undefined')
{
var aeOL = [];
var addEvent = function(o, n, f, l)
{
var d = 'addEventListener', h = 'on' + n, t, a;
if (o[d] && !l) return o[d](n, f, false);
if (!o.aE) { o.aE = aeOL.length || 1; aeOL[o.aE] = { o:o } }
t = aeOL[o.aE][n] || (aeOL[o.aE][n] = []);
for (var i = 0; i < t.length; i++)
for (var j = 0; j < t[i].length; j++)
if (t[i][j] == f) return;
if (o[h] && o[h]._ae)
{
a = t[t.length - 1];
a[a.length] = f;
}
else
{
t[t.length] = o[h] ? [o[h], f] : [f];
o[h] = new Function('e', 'var r = true, i = 0, o = aeOL[' + o.aE + '].o,' +
'a = aeOL[' + o.aE + ']["' + n + '"][' + (t.length - 1) + '];' +
'for (; i < a.length; i++) { ' +
'o._f = a[i]; r = o._f(e||window.event) != false && r; o._f = null;' +
'} return r');
o[h]._ae = 1;
}
};
var removeEvent = function(o, n, f, l)
{
var d = 'removeEventListener', t, a, i, j, s;
if (o[d] && !l) return o[d](n, f, false);
if (!o.aE || !aeOL[o.aE]) return;
t = aeOL[o.aE][n];
i = t.length;
while (i--)
{
a = t[i];
j = a.length;
s = 0;
while (j--)
{
if (a[j] == f) s = 1;
if (s) a[j] = a[j + 1];
}
if (s) { a.length--; break }
}
};
}
function detectChecks(aForm) {
if(!document.getElementsByTagName) return;
if(!(aForm && aForm.tagName && (aForm.tagName.toLowerCase() == 'form'))) {
var forms = document.getElementsByTagName('form');
for(var i=0;i<forms.length;i++) detectChecks(forms[i]);
}
var inputs = aForm.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++) {
if(!inputs[i].type || (inputs[i].type.toLowerCase()!='checkbox')) continue;
if(inputs[i].watch) { // Mozilla Gecko (including Firefox and Netscape 7+)
inputs[i].watch('checked', function (prop,oldval,newval) {
alert(prop + " changed from "+ oldval + " to " + newval);
return newval;
});
} else if(document.defaultCharset && document.getElementsByTagName) { //IE5+
inputs[i].onpropertychange = function() {
if(this.name == event.srcElement.name &&
(!this.id || (this.id == event.srcElement.id)))
if(event.propertyName.toLowerCase() == 'checked')
alert('checked is '+ event.srcElement.checked)
}
}
addEvent(inputs[i],'click',function() { alert(this.checked)});
}
}
window.onload = function() {
if(!document.getElementsByTagName) return;
detectChecks(document.getElementsByTagName('form')[0]);
}
// -->
</script>
</head>
<body>
<p>This works in IE5+/Win, Firefox, and Netscape 7+.
Using watch() crashes Netscape 6.x.
Opera can only detect when the user changes the checked property.</p>
<form name="form1" action="#"
onsubmit="alert('form submitted');return false;"><div>
<label> blue <input type="checkbox" name="checkbox" value="blue"></label><br>
<label> red <input type="checkbox" name="checkbox" value="red"></label><br>
<label> orange <input type="checkbox" name="checkbox" value="orange"></label><br>
<label> yellow <input type="checkbox" name="checkbox" value="yellow"></label><br>
<label> black <input type="checkbox" name="checkbox" value="black"></label><br>
<label> green <input type="checkbox" name="checkbox" value="green"></label><br>
<label> purple <input type="checkbox" name="checkbox" value="purple"></label><br>
<label> <input type="button" value="toggle check of first checkbox via JS"
onclick="var cb=this.form.getElementsByTagName('input')[0];cb.checked=cb.checked?0:1;">
</div></form>
</body>
</html>
