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.
Nice, clean, efficient script. Thanks.
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 it to work in IE but not FF for some strange reason and I have no clue why