...

View Full Version : parent and child checkboxes



saljb
06-01-2005, 03:29 PM
I currently have populated checkboxes in my form. I would like to write script that by clicking on a parent checkbox it will automatically select the child checkboxes as well.

The current Script I have is only the parent with a name and populated value attached to it. I would like to attach child checkboxes for each checkbox that appears from code below.



<input type="checkbox" name="price" value="<%Response.Write Recordset("price")%>"/>

glenngv
06-01-2005, 03:35 PM
What naming pattern you are using to indicate that these set of checkboxes are under a particular parent checkbox? We need to know such kind of relationship to be able to quickly solve it exactly to your checkbox setup.

glenngv
06-01-2005, 03:52 PM
Or you can do it without relying on the naming pattern but on grouping a set of checkboxes inside a container.

function toggleGroup(parentChk, parentId){
var parent = document.getElementById(parentId);
var chks = parent.getElementsByTagName('input');
var len = chks.length;
var state = parentChk.checked;
for (var i=1; i<len; i++){ //skip the first checkbox
if (chks[i].type=="checkbox"){ //just in case you have other input types inside the div
chks[i].checked = state;
}
}
}
...
<div id="priceDiv">
<input type="checkbox" name="price" value="<%Response.Write Recordset("price")%>" onclick="toggleGroup(this, 'priceDiv')" />
<input type="checkbox" name="price1" value="1"/>
<input type="checkbox" name="price2" value="2"/>
<input type="checkbox" name="price3" value="3"/>
</div>

saljb
06-01-2005, 03:53 PM
The below code comes up with (as an example)



<td><input type="checkbox" name="price" value="<%Response.Write Recordset("price")%>"/></td>


<td><input type="checkbox" name="price" value="1"/></td>
<td><input type="checkbox" name="price" value="2"/></td>
<td><input type="checkbox" name="price" value="3"/></td>
<td><input type="checkbox" name="price" value="4"/></td>

I would like to do something like this with first input is parent and second is child in each td tag.



<td><input type="checkbox" name="price" value="<%Response.Write Recordset("price")%>"/><input type="checkbox" name="option" value="<%Response.Write Recordset("price")%>"/></td>


<td><input type="checkbox" name="price" value="1"/><input type="checkbox" name="option" value="1"/></td>
<td><input type="checkbox" name="price" value="2"/><input type="checkbox" name="option" value="2"/></td>
<td><input type="checkbox" name="price" value="3"/><input type="checkbox" name="option" value="3"/></td>
<td><input type="checkbox" name="price" value="4"/><input type="checkbox" name="option" value="4"/></td>

So if the in each td tag if the first input (the parent) is selected the second input (the child) will automatically be selected as well. I will ultimately hide the child input.

Thanks.SalJB

SpirtOfGrandeur
06-01-2005, 04:03 PM
Great solution glenngv. The only thing that i suggest is that you check if parent is null. You dont want to run into an error!

if (!parent) return false;


Or you can do it without relying on the naming pattern but on grouping a set of checkboxes inside a container.

function toggleGroup(parentChk, parentId){
var parent = document.getElementById(parentId);
var chks = parent.getElementsByTagName('input');
var len = chks.length;
var state = parentChk.checked;
for (var i=1; i<len; i++){ //skip the first checkbox
if (chks[i].type=="checkbox"){ //just in case you have other input types inside the div
chks[i].checked = state;
}
}
}
...
<div id="priceDiv">
<input type="checkbox" name="price" value="<%Response.Write Recordset("price")%>" onclick="toggleGroup(this, 'priceDiv')" />
<input type="checkbox" name="price1" value="1"/>
<input type="checkbox" name="price2" value="2"/>
<input type="checkbox" name="price3" value="3"/>
</div>

glenngv
06-01-2005, 04:04 PM
So you are using a table. Are the checkboxes belonging to a set in the same row? And the first checkbox in a row is the parent checkbox? If you answer yes, then you just modify my initial suggestion a bit.


function toggleGroup(parentChk){
var parentRow = parentChk.parentNode.parentNode; //go 2 parent elements up
var chks = parentRow.getElementsByTagName('input');
var len = chks.length;
var state = parentChk.checked;
for (var i=1; i<len; i++){ //skip the first checkbox
if (chks[i].type=="checkbox"){ //just in case you have other input types inside the div; can be removed if no other input types
chks[i].checked = state;
}
}
}
...
<input type="checkbox" name="price" value="<%Response.Write Recordset("price")%>" onclick="toggleGroup(this)" />

glenngv
06-01-2005, 04:11 PM
Great solution glenngv. The only thing that i suggest is that you check if parent is null. You dont want to run into an error!

if (!parent) return false;
Yes it is good to have that, but here, it is assumed that you will pass a valid parent id that really exists. If not, then in that case you also need to check if parentChk is null or not.

saljb
06-01-2005, 04:14 PM
Thanks guys. It is working.

I would like a bit of clarification on what SpirtOfGrandeur was talking about.
Where/IF would I insert:



if (!parent) return false;


SalJB.Thanks

glenngv
06-01-2005, 04:24 PM
If you really need to do the checking, then you just put it after the parent variable is set.

saljb
06-01-2005, 04:26 PM
How would I change the visibility of the child checkbox to hidden?
If I change the type="checkbox" to type="hidden" it will no longer be a checkbox.

glenngv
06-01-2005, 04:28 PM
checkboxReference.style.display="none";

Set the display to "inline" to show it again.

saljb
06-01-2005, 04:43 PM
glennGV you have been so helpful I do appreciate it. I am sorry for buggin you again but I am a bit new to js.

where would I add:

checkboxReference.style.display="none";

I tried puting it between <style> tags and then in the begining and then the end of the <script> tag and in the input of the child checkboxes.

thanks so much and thank you ahead of time.

SalJB

if there is a way of rating your help let me know!!

SpirtOfGrandeur
06-01-2005, 07:40 PM
Yes it is good to have that, but here, it is assumed that you will pass a valid parent id that really exists. If not, then in that case you also need to check if parentChk is null or not.

Hahahah... good point! Whoops I missed that one!

saljb I was just letting you know to check the vairable in telling you to check if parent is null... I assume nothing because I write JS all day long that other programmers are going to be using... If there is an error they will find it. And they like popups telling them what and where it went wrong. Sorry glengv, I hope you took no offence to it because none was intended, I was just trying to be helpful!

glenngv
06-02-2005, 03:06 AM
Sorry glengv, I hope you took no offence to it because none was intended, I was just trying to be helpful!No problem. ;)


where would I add:
checkboxReference.style.display="none";
I don't know when do you want to hide/show the checkboxes. You have not shown your latest code.

blinkdt
07-24-2005, 02:17 AM
@glenngv You saved the day. Your "container" approach to selecting a group of checkboxes worked like a charm and was exactly what I needed.

Question for you: is it possible to adapt the function to toggle between "Select All" and "Revert to Default?" Some of the check boxes in the app I am working with are preselected. I have done this with your function:


function checkCategory(parentChk, parentId){
var parent = document.getElementById(parentId);
var chks = parent.getElementsByTagName('input');
var len = chks.length;
var state = parentChk.checked;
if (!parent) return false;
for (var i=1; i<len; i++){ //skip the first checkbox
//added line
if (dflt[i] && dflt[i]=='yes') {setChecked(i); }
//added else
else chks[i].checked = state;
}
}

It works fine for the first container, but produces bizzare behavior in the others. Obviously, my cookie-cutter approach to JavaScripting is the culprit here. :rolleyes:

Maybe by introducing a child variable?

glenngv
07-26-2005, 03:42 AM
Is this what you want?

function checkCategory(parentChk, parentId){
var parent = document.getElementById(parentId);
if (!parent) return false;
var chks = parent.getElementsByTagName('input');
var len = chks.length;
var state = parentChk.checked;
for (var i=1; i<len; i++){ //skip the first checkbox
if (chks[i].defaultChecked) //pre-selected by default
chks[i].checked = true;
else
chks[i].checked = state;
}
}
You don't need an array of checked states of the checkboxes, you can already test if a checkbox is pre-selected by evaluating the defaultChecked property.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum