Select All JavaScript for multiple sets of checkboxes

JavaScript
1

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>

2

Change your code to this:

<script type=“text/javascript”>
function checkAll(theForm, cName, allNo_stat) {
var n=theForm.elements.length;
for (var i=0;i<n;i++){
if (theForm.elements[i].className.indexOf(cName) !=-1){
if (allNo_stat.checked) {
theForm.elements[i].checked = true;
} else {
theForm.elements[i].checked = false;
}
}
}
}
</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);” />
<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);” />
</form>

3

Thanks so much for your speedy reply. Works like a charm.

  • Dylan
4

Hola,

The script you so kindly shared below is great, and works in all browsers I’ve tried except Konqueror 3.2. It errors out with TypeError: Null Value on the line

if(theForm.elements[i].className.indexOf(cName)!=1){…

portion.

Any ideas? My biggest (and only concern) is that the shared codebase between Konqueror and Apple’s Safari may cause problems, and alas, I’ve not got a Mac to test this out on.

5

I notice that the excerpted line you posted is missing the - before the 1. Make sure that is correct in your code. Otherwise, we would just have to experiment with Konqueror to find out what about the statement is hanging it up, though the syntax should be valid.

6

Hi there. Yes, the code I’m using does has a “-1”. I ommitted it when I typed in the line here.

7

Well, it sounds like Konqueror lacks support for some aspect of the object naming convention, but that is a very preliminary diagnosis. It would be necessary to sit down with Konq and test to see what it actually is returning for the various values in the function.

You might also check the KDE site to see if there is a spec page that might shed some light. I know that Opera, for instance, has a page that lists the deficiencies in the JavaScript interpreter, like methods not supported and such.