View Full Version : Check Group of Checkboxes

09-16-2005, 07:49 PM
Now, I know checking/unchecking a group of checkboxes via a "master" checkbox is easy, but there's some issues beyond my control that make this task difficult for myself.

Basically i'm doing the web UI for an app thats already written. So i'm just making it look pretty with HTML/CSS, and adding javascript stuff for added functionality.

The app generates line items each with its own checkbox. The line items are grouped by where they are being shipped, so each shipment line also has a checkbox which I would like to serve as a "master checkbox". When you click this master checkbox every checkbox under the shipment would be checked. The thing is, the name, id, etc has to be exactly the same for every checkbox on the page, which makes this difficult. This is because I really only have two checkboxes to work with in the code, 1 master and 1 line item. When the app is processed through the server it copies the code for each line item over and over and inserts the correct data.

Is something like this possible without being able to reference the name or id of the checkbox groups? I already have a "select all" button, which selects/deselects all checkboxes on a page. But i'd also like the ability to select all in one group only.


09-16-2005, 08:27 PM
Something like this mate?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function checkAll(checkbox, theCommonNodeName) {
theCommonNodeName = theCommonNodeName.toLowerCase();
var theCommonNode = checkbox.parentNode;
while(theCommonNode.nodeName.toLowerCase() != theCommonNodeName && theCommonNode != document) {
theCommonNode = theCommonNode.parentNode;

if(theCommonNode.nodeName.toLowerCase() != theCommonNodeName) {
alert("Common parent node could not be found");

var inputs = theCommonNode.getElementsByTagName("input");
for(var i=0; inputs[i]; i++) {
if(inputs[i].type == "checkbox") {
inputs[i].checked = checkbox.checked;
<style type="text/css">
body {
font-family: "Courier New", Courier, mono;
font-size: 12px;
color: #333333;

h1 {
color: #000033;
font-size: 14px;
font-weight: bold;

hr {
border: 1px solid black;
width: 400px;

<h1>Test 1</h1>
<form name="frmTest1">
Check all in this form:<input type="checkbox" name="chkAll" onclick="checkAll(this, 'form');">
checkbox1:<input type="checkbox" name="chk1"><br>
checkbox2:<input type="checkbox" name="chk2"><br>
checkbox3:<input type="checkbox" name="chk3"><br>

<h1>Test 2</h1>
<form name="frmTest2">
<table border="1" cellspacing="1" cellpadding="2">
<tr><td>Check all in this table:<input type="checkbox" name="chkAll" onclick="checkAll(this, 'table');"></td></tr>
<tr><td>checkbox1:<input type="checkbox" name="chk1"></td></tr>
<tr><td>checkbox2:<input type="checkbox" name="chk2"></td></tr>
<tr><td>checkbox3:<input type="checkbox" name="chk3"></td></tr>

<h1>Test 3</h1>
<form name="frmTest3">
<table border="1" cellspacing="1" cellpadding="2">
<td>Check all in this row:<input type="checkbox" name="chkAll" onclick="checkAll(this, 'tr');"></td>
<td>checkbox1:<input type="checkbox" name="chk1"></td>
<td>checkbox2:<input type="checkbox" name="chk2"></td>
<td>checkbox3:<input type="checkbox" name="chk3"></td>
<td>Check all in this row:<input type="checkbox" name="chkAll" onclick="checkAll(this, 'tr');"></td>
<td>checkbox4:<input type="checkbox" name="chk4"></td>
<td>checkbox5:<input type="checkbox" name="chk5"></td>
<td>checkbox6:<input type="checkbox" name="chk6"></td>
The code should be pretty self-explanatory, the onclick you add to your "check all" checkbox should be:
onclick="checkAll(this, 'the common parent html tag for your checkboxes');"
onclick="checkAll(this, 'tr');"
onclick="checkAll(this, 'div');"
onclick="checkAll(this, 'table');"
etc etc

Hope this helps


09-16-2005, 11:19 PM
Yessss that works PERFECT! Thank you so very much. :)

09-23-2005, 11:39 PM
Hey how would I use this same type of script, but instead of having the "master" be a checkbox, it would be an image, link, or input that when clicked would show a hidden layer (TD). At that time it would also change the default text or image displayed from "show" to "hide". And of course when you click it again it would hide the TD.

It needs to use the same sort of way of doing it, as I can't give each hidden TD a specific ID, HOWEVER i CAN give the hidden TD an ID to specify it from all of the other TD tags within. It would just be that there would be multiple TD's with this ID. So basically it needs to say "find the TD in this TABLE with the id of "happy" and show/hide it.

Any help would be great. I'm able to get it working using the code form above to some extent, but i cant figure out how to tell it to only hide the TD with the specified ID. So its hiding/showing every other TD within.