Select All JavaScript for multiple sets of checkboxes

[dylanmac]

Hi -

So I found this nifty little JavaScript that almost works exactly as I want it to - but not quite.

What I want to do is have two SelectAll/Select None checkboxes that each sit below two different sets of results on a page.

Both result sets sit within the same form.

When I click the "Select All" checkbox below the first set of results, it selects all or deselects all of the rows in the first

set.

When I click the "Select All" checkbox below the second set of results, it selects all or deselects all of the rows in the

second set.

The javascript I'm using works off of a style class for each set of checkboxes, so the fact that the result sets are all within

the same form doesn't impede this from working. However, the JavaScript I have doesn't Select All or Select None; rather, it

selects the inverse of the set. That is, if three checkboxes are checked and 7 are not, then clicking on the checkbox deselects

the three and selects the seven. Interesting, but not what I'm after.

Can anyone tell me how to modify this so that the script simply selects all or deselects all for each respective set?

<script language="JavaScript">
function checkAll(theForm, cName) {
for (i=0,n=theForm.elements.length;i<n;i++)
if (theForm.elements[i].className.indexOf(cName) !=-1)
if (theForm.elements[i].checked == true) {
theForm.elements[i].checked = false;
} else {
theForm.elements[i].checked = true;
}
}
</script>

<form id="selectForm">

Set 1:
<br>
<input type="checkbox" name="selected" value="01" class="results1"><br>
<input type="checkbox" name="selected" value="02" class="results1"><br>
Select All/None <input type="checkbox" onclick="checkAll(document.getElementById('selectForm'), 'results1');" />
<br>
<br>

Set 2:
<br>
<input type="checkbox" name="selected" value="01" class="results2"><br>
<input type="checkbox" name="selected" value="02" class="results2"><br>
Select All/None <input type="checkbox" onclick="checkAll(document.getElementById('selectForm'), 'results2');" />

</form>

[Exuro]

Try this instead:

<script language="JavaScript">
function checkAll(theForm, cName, status) {
for (i=0,n=theForm.elements.length;i<n;i++)
  if (theForm.elements[i].className.indexOf(cName) !=-1) {
    theForm.elements[i].checked = status;
  }
}
</script>

<form id="selectForm">

Set 1:
<br>
<input type="checkbox" name="selected" value="01" class="results1"><br>
<input type="checkbox" name="selected" value="02" class="results1"><br>
Select All/None <input type="checkbox" onclick="checkAll(document.getElementById('selectForm'), 'results1', this.checked);" />
<br>
<br>

Set 2:
<br>
<input type="checkbox" name="selected" value="01" class="results2"><br>
<input type="checkbox" name="selected" value="02" class="results2"><br>
Select All/None <input type="checkbox" onclick="checkAll(document.getElementById('selectForm'), 'results2', this.checked);" />

</form>

[dylanmac]

Works like a charm. Thank you very much, I really appreciate it.

- Dylan

[leopold79]

thanks! i looked everywhere for this but couldn't find it anywhere!