Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Selecting all checkboxes between a DIV tag

Status
Not open for further replies.
Mayoor

Mayoor

Programmer
Jan 16, 2004
198
0
0
GB
Hi I have a form which has about 50 check boxes. However some of those checkboxes are between a divtag of id=childrensgroup.

Is there any way in Javascript that I can click a checkbox called "Select all checkboxes in the childrens group" outside the DIV tag which will then select all the checkboxes between the div tag with id=childrensgroup.

Thanks for any help.
 
Sort by date Sort by votes
yup,

u can read through the Div's child nodes.

can i have the HTML insde the Div(an example)?

another option would be to name the checkboxes something like this:
Grp1
Grp2

etc. now u can browse through the items in a form using elements() method of the form and check the checkboxes accordingly...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
Hey thanks I wil post the HTML tommorow during the day as the code is at work, however there is some ASP involved. Hope that is ok!

thanks
 
Upvote 0 Downvote
Here is the code. I basically need some javascript which will tick all the checkboxes between the div with id=childrens group. Any ideas guys?


Code: 
<div id="childrensgroup" style="display:none;">
<%
intRecordCount = 0							
if not Interest3RS.EOF then
	while not Interest3RS.eof
	
%>
<div class="rSBTT"><div class="rSKNSLC"><label for="05yes"><%=Interest3RS("Title")%></label></div>
	<div class="rSNSRC"><input type="checkbox" id="05yes" name="interest" tabindex="71" value="<%=Interest3RS("InterestID")%>" />
		</div>
	<div class="cF">&nbsp;Yes </div>
</div>
<div class="sV9"></div>
<%							
	Interest3RS.MoveNext
	wend
End If													
%>
</div>
 
Upvote 0 Downvote
a small example:
Code: 
<script>
function CheckAll()
{
 TheVal=document.forms[0].DivName.value
 TheAction=true
 if(document.forms[0].ActionType[1].checked)
  TheAction=false

 TheDiv=document.getElementById("Div"+TheVal)
 for(i=0;i<TheDiv.childNodes.length;i++)
 {
   TheChildNode=TheDiv.childNodes[i]
   if(TheChildNode.type=="checkbox")
    TheChildNode.checked=TheAction
 }
}
</script>
<body>
<form>
<div id="Div1">
1	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">
</div>

<div id="Div2">
2	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">
</div>

Div to work with: <input type="text" name="DivName" value="1"><br>
Action to perform: <input type="radio" name="ActionType" value="true">Check <input type="radio" name="ActionType" 

value="false">UnCheck<br>

<input type="button" value="Check All" onclick="CheckAll()">
</form>
</body>

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
Hi....I dont need soemthign as complex as that i just need one check box which clicks all between the divs!
 
Upvote 0 Downvote
thta is just the concept, u could try this:
Code: 
<script>
function CheckAll(TheDiv,TheType)
{
 
 for(i=0;i<TheDiv.childNodes.length;i++)
 {
   TheChildNode=TheDiv.childNodes[i]
   if(TheChildNode.type=="checkbox")
    TheChildNode.checked=TheType
 }
}
</script>
<body>
<form>
<div id="Div1">
1	<input type="checkbox" onclick="CheckAll(this.parentNode,this.checked)"> Check All<br>
	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">
</div>

<div id="Div2">
2	<input type="checkbox" onclick="CheckAll(this.parentNode,this.checked)"> Check All<br>
	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">
</div>

</form>
</body>

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
I dont need soemthign as complex as that
Click to expand...

if it's simple you want, this is about as uncomplex as you can make it:

Code: 
var cbs = document.getElementById('childrensgroup');
for (var loop=0; loop<cbs.length; loop++)
   if (cbs[loop].type == 'checkbox') cbs[loop].checked = true;

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Hi thanks thats a lot better. Im tryig to integrate this into my code, however it still isnt working.... heres what I've got. I think the reason it might not be working is because there are still divs between the parent DIV i am trying to parse.

Code: 
<html>
<head>
<script>

function CheckAll(TheDiv,TheType)
{
alert(TheDiv)
				
for(i=0;i<TheDiv.childNodes.length;i++)
{
TheChildNode=TheDiv.childNodes[i]
if(TheChildNode.type=="checkbox")
	TheChildNode.checked=TheType
}
}

</script>
</head>

<body>
<div id="childrensgroup">
<input type="checkbox" onclick="CheckAll(this.parentNode,this.checked)" ID="Checkbox6" NAME="Checkbox1"> Check All<br>
<%
intRecordCount = 0							
if not Interest3RS.EOF then
	while not Interest3RS.eof
	
%>
<div class="rSBTT"><div class="rSKNSLC"><label for="05yes"><%=Interest3RS("Title")%></label></div>
	<div class="rSNSRC"><input type="checkbox" id="05yes" name="interest" tabindex="71" value="<%=Interest3RS("InterestID")%>" />
		</div>
	<div class="cF">&nbsp;Yes </div>
</div>
<div class="sV9"></div>
<%							
	Interest3RS.MoveNext
	wend
End If													
%>
</div>
</body>
</html>

any ideas?
 
Upvote 0 Downvote
why are u having so many sub divs???

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
BillyRayPreachersSon thanks for that but is the fact i have divs within divs going to be a problem or will the code just check all the checkboxes between childrens group?
 
Upvote 0 Downvote
vbKris - thats the way i have been given the code i have to wrap my asp around it and have been told not to touch the design. :(
 
Upvote 0 Downvote
u have to take an alternative approach then,

try this:
Code: 
<script>
function CheckAll(TheName,TheType)
{
	TheElem=document.forms[0].elements
	for(i=0;i<TheElem.length;i++)
	{
		if(TheElem[i].name==TheName)
		{
			TheElem[i].type=="checkbox"?TheElem[i].checked=TheType:""
		}
	}
}
</script>
<body>
<form>
<div id="Div1">
1	<input type="checkbox" onclick="CheckAll('Chk1',this.checked)"> Check All<br>
	<input type="checkbox" name="Chk1">
	<input type="checkbox" name="Chk1">
	<input type="checkbox" name="Chk1">
</div>

<div id="Div2">
2	<input type="checkbox" onclick="CheckAll('Chk2',this.checked)"> Check All<br>
	<input type="checkbox" name="Chk2">
	<input type="checkbox" name="Chk2">
	<input type="checkbox" name="Chk2">
</div>

</form>
</body>

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
eeeek another problem is that there are other checkboxes on the page with the name interest that i dont want checked :(
 
Upvote 0 Downvote
You asked for code to check ALL checkboxes within the div with an id of "childrensgroup".

If you have div elements withiin that div, and they contain checkboxes, then those checkboxes ultimately are inside the outer div, and so still fall inside the original remit.

If you don't want chckboxes inside other divs (which are inside the original div) checked, then you need to be more specific about your requirements, instead of saying "all" checkboxes.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
u have to add an ID to the checkbox (if u notice my example 1,2) something that is unique...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
Dan - I want ALL checkboxes within the childrensgroup DIV checked regardless of whether they are within other divs.
 
Upvote 0 Downvote
Dan I have tested your theory by removing all my DIV tags nested in the DIV id=childrensgroup and when there are no nested DIV's the function works, therefore the problem lies with the fat that there are nested divs!

Hmmmm How to get around this!
 
Upvote 0 Downvote
did my method work???

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
4
Views
256
Mike Lewis
Mike Lewis
markronz
  • Locked
  • Question
Javascript to edit all script tags 1
Replies
2
Views
79
feherke
feherke
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
296
ggriffit
ggriffit
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
141
malpa
malpa
CrxC01
  • Locked
  • Question
Sum of All Primes
Replies
0
Views
43
CrxC01
CrxC01

Part and Inventory Search

Sponsor

Back
Top