Javascript
function checkAll(ca) {
var fs=ca.id.split('-')[1];
var cboxes=document.getElementById('fs-'+fs).getElementsByTagName('input');
for (j=0; j<cboxes.length; j++) {
cboxes[j].checked=((ca.checked==true)? true : false);
}
}
function initCheckAll() {
var fsets=document.getElementById('caForm').getElementsByTagName('fieldset');
for (i=0; i<fsets.length; i++) {
document.getElementById('ca-'+i).onclick=function() {checkAll(this)}
}
}
window.onload=initCheckAll;
HTML
<h1>(Un)check all boxes in fieldsets</h1>
<form action="#" id="caForm">
<fieldset id="fs-0">
<legend>set zero</legend>
<label>One: <input type="checkbox"></label>
<label>Two: <input type="checkbox"></label>
<label>Three: <input type="checkbox">
</label>
<label>Check/Uncheck all <input type="checkbox" id="ca-0"></label>
</fieldset>
<fieldset id="fs-1">
<legend>set one</legend>
<label>One: <input type="checkbox"></label>
<label>Two: <input type="checkbox"></label>
<label>Three: <input type="checkbox"></label>
<label>Check/Uncheck all <input type="checkbox" id="ca-1"></label>
</fieldset>
<fieldset id="fs-2">
<legend>set two</legend>
<label>One: <input type="checkbox"></label>
<label>Two: <input type="checkbox"></label>
<label>Three: <input type="checkbox"></label>
<label>Check/Uncheck all <input type="checkbox" id="ca-2"></label>
</fieldset>
</form>
CSS
#caForm label {
display:block;
position:relative;
width:15em;
margin:auto;
}
#caForm label input {
position:absolute;
right:0;
}
Melanie,
It works fine for me on FF.
This is brilliant work. Cheers!
I'll test it out and let you know if I have problems in any browsers. I test ie6+, ff2+, opera 9+ and safari.
Great job. One thing it lacks is to check/uncheck the "check all" box when all other checkboxes in fieldset are checked/unchecked.
i can get this to work just fine in all browsers, but the minute i take the code and put it in my own page its not working in Chrome or Firefox. Works FINE in IE, any ideas?
tony weeg,
Can you show me the page?
I can get it to work in IE but not FF for some strange reason and I have no clue why