Check All Checkboxes - HTML Forums

mastahkaz · 09-15-2005, 04:01 PM

I was wondering if there's a way to have an unlimited amount of groups of checkboxes, each with their own "master" checkbox at the top which when checked would check all of the other boxes in that coresponding group.

Now the catch is, ALL the checkboxes need to have the same name and ID. So the script cant really say, "when this master box is checked also check all other checkboxes with the name or ID so and so...".

They all also need to be part of the same form.

Anyone have any ideas?

Heres what the base HTML would look like:

Code:

<form>
<input type="checkbox" name="masterBox"> (master checkbox)<br>
<input type="checkbox" name="itmBox" id="itmBox" value="random"> 1<br>
<input type="checkbox" name="itmBox" id="itmBox" value="random"> 2<br>
<input type="checkbox" name="itmBox" id="itmBox" value="random"> 3<br>
<input type="checkbox" name="itmBox" id="itmBox" value="random"> 4<br>
<hr>
<input type="checkbox" name="masterBox"> (master checkbox)<br>
<input type="checkbox" name="itmBox" id="itmBox" value="random"> 1<br>
<input type="checkbox" name="itmBox" id="itmBox" value="random"> 2<br>
<input type="checkbox" name="itmBox" id="itmBox" value="random"> 3<br>
<input type="checkbox" name="itmBox" id="itmBox" value="random"> 4<br>
<hr>
<input type="checkbox" name="masterBox"> (master checkbox)<br>
<input type="checkbox" name="itmBox" id="itmBox" value="random"> 1<br>
<input type="checkbox" name="itmBox" id="itmBox" value="random"> 2<br>
<input type="checkbox" name="itmBox" id="itmBox" value="random"> 3<br>
<input type="checkbox" name="itmBox" id="itmBox" value="random"> 4<br>
<hr>
<input type="checkbox" name="masterBox"> (master checkbox)<br>
<input type="checkbox" name="itmBox" id="itmBox" value="random"> 1<br>
<input type="checkbox" name="itmBox" id="itmBox" value="random"> 2<br>
<input type="checkbox" name="itmBox" id="itmBox" value="random"> 3<br>
<input type="checkbox" name="itmBox" id="itmBox" value="random"> 4<br>
<hr>
</form>

Kalessin · 09-18-2005, 08:30 AM

The fact that all your checkboxes have the same name and id is a problem and I can't work out why you've done it that way. I reckon that, as far as the DOM is concerned, they are all pretty much the same checkbox. How are you hoping to retrieve input when your form is submitted?

Anyway, I'd imagine you could hack your way around the problem by applying a CSS style to each group of checkboxes then using that to uniquely identify each group.

Hiei · 09-18-2005, 01:01 PM

you could just, after naming your individual checboxes 1,2,3 and so on then write a script saying when "master checkbox" is checked check 1,2,3 and all. thats the only way i can see that if there is another way i would really be interested in the how that worked

maskd · 09-20-2005, 03:37 AM

Code:

<html>
<head>
<title>Check All boxes</title>

<script language="Javascript">
<!--
function checkAll(obj)
{
  for (i=0;i<obj.length; i++) {
    obj[i].checked = true;
  }
}
</script>

</head>

<body>

<form name="checkForm">
<input type="checkbox" name="masterBox" onclick="checkAll(document.checkForm.itmBox)"> (master checkbox)<br>
<input type="checkbox" name="itmBox" id="itmBox" value="1"> 1<br>
<input type="checkbox" name="itmBox" id="itmBox" value="2"> 2<br>
<input type="checkbox" name="itmBox" id="itmBox" value="3"> 3<br>
<input type="checkbox" name="itmBox" id="itmBox" value="4"> 4<br>
</form>

</body>

</html>