...

View Full Version : checkboxes to check/uncheck all



perpetualshaun
11-05-2004, 02:19 PM
I spent some time last week looking through several JavaScript code sources to find some code that would allow me to do the "check/uncheck" all thing from another checkbox. What I pieced together works here, but I wanted to verify that this is the best way to code this.

Here's my simple list of checkboxes:

<form action="check_all_test.html" method="post" name="listingform" id="listingform">

<input type="checkbox" name="check_all_top" onClick="checkAllSwitchTop()" /><br />
<input type="checkbox" name="manage[]" value="3" /><br />
<input type="checkbox" name="manage[]" value="1" /><br />
<input type="checkbox" name="manage[]" value="2" /><br />
<input type="checkbox" name="check_all_bottom" onClick="checkAllSwitchBottom()" />

</form>

And here's my JavaScript in the header of the page:

<script language="JavaScript" src="" type="text/javascript">
function checkAllSwitchTop() {
var checkVal = false;
if(document.listingform.check_all_top.checked == true) {
checkVal = true;
}
count = document.listingform.elements.length;
for (i=0; i < count; i++) {
document.listingform.elements[i].checked = checkVal;
}
}
function checkAllSwitchBottom() {
var checkVal = false;
if(document.listingform.check_all_bottom.checked == true) {
checkVal = true;
}
count = document.listingform.elements.length;
for (i=0; i < count; i++) {
document.listingform.elements[i].checked = checkVal;
}
}
</script>

So my questions are...

1) Is there a way to do this w/ ONE function? I want to have a working check/uncheck all box at the top AND the bottom of my list.
2) Is there also a way to specify that I only wan to check/uncheck all the checkboxes w/ the name="manage[]"?


Thanks,

Shaun

Pennstater
11-05-2004, 05:21 PM
Shaun,

Here is my attempt to your questions...

<html>
<head>
<script>
function checkUncheckAll(f,fldName){
var frm = f.form;
if(f.checked){
for(var i = 0;i < frm.elements[fldName].length;i++){
frm.elements[fldName][i].checked = true;
}
}else{
for(var i = 0;i < frm.elements[fldName].length;i++){
frm.elements[fldName][i].checked = false;
}
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="check_all_top" onClick="checkUncheckAll(this,'manage')" />Select All<br />
<input type="checkbox" name="manage" value="3" /><br />
<input type="checkbox" name="manage" value="1" /><br />
<input type="checkbox" name="manage" value="2" /><br />
<input type="checkbox" name="check_all_bottom" onClick="checkUncheckAll(this,'manage')" />Select All
</form>
</body>
</html>

Hope this helps.

Pennstater

ca_redwards
11-05-2004, 05:46 PM
Here's the allSomeNone function I use in my online resume (http://www.freewebs.com/ca_redwards):

function allSomeNone(checkbox,selector,widget)
{
if(selector.name==widget.name)
{
if(selector.selectedIndex==0)
for(var i=0;i<checkbox.length;i++)
checkbox[i].checked=true;
if(selector.selectedIndex==2)
for(var i=0;i<checkbox.length;i++)
checkbox[i].checked=false;
};
var sum=0;
for(var i=0;i<checkbox.length;i++)
if(checkbox[i].checked)sum++;
selector.selectedIndex=(sum==0?2:(sum==checkbox.length?0:1));
};


It is called on both the checkboxes and the select control that sets/identifies how many are checked in the checkbox array.

Here's the actual HTML code used:


<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Chief Information Officer (CIO)
<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Chief Technology Officer (CTO)
<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Client/Server Architect
<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Consultant
<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Curriculum Developer
<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Entrepreneur
<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Information Architect
<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Innovator
<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Instructor
<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Internet Technologist
<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Lecturer
<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Project Leader
<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Project Manager
<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Software Developer
<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Software Engineer
<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Speaker
<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Systems Analyst
<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Technical Writer
<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Trainer
<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Web Designer
<INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Workshop Leader
<SELECT onchange=with(this.form){allSomeNone(objective,r_objective,this)} name=r_objective>
<OPTION selected>all</OPTION>
<OPTION>some</OPTION>
<OPTION>none</OPTION>
</SELECT>

If you select all or none, the checkboxes change accordingly. If you toggle some of the checkboxes, the select displays the some value.

Does this help?

adios
11-05-2004, 06:05 PM
Never quite understood the conviction that when one is "gang-checking" checkboxes, one must use a...checkbox.

http://www.codingforums.com/showthread.php?t=40453&page=2&highlight=check

jmo



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum