...

View Full Version : Need Help With "Select All" Checkboxes



caclark
04-13-2005, 05:24 PM
I need some help with a modification to a "Select All" JS. First off I have a unique situation where I will eventually have many checkboxes, and some need to remain checked even when the "Unselect All" button is used. I can't use a "reset" because that would then remove other form items already filled in from the form. I really can't set a cookie to capture the default values because where I have to use this page will not allow cookies (even sessions) to be saved, the system is locked down pretty tight.

I was thinking of (if it is possible) to be able to identify the checkboxes that I always want checked with a specific ID and therefore be able to then parse thru JS to always keep these checked.

Below is what I have so far, but I am not able to get the "ID" value, and therefore am not able to check using JS.


Any help would be greatly appreciated.




<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

// Function to "Select All" Checkboxes
var checkflag = "false";
function check(field) {
var alwaysTrue = (field.length -1)
if (checkflag == "false") {
for (i = 0; i < field.length; i++) {
field[i].checked = true;}
checkflag = "true";
return "Restore Defaults";
}
else {
for (i = 0; i < field.length; i++) {

var checkDefault = document.getElementById(i);
document.write("" + checkDefault);

// Several Fields should always be checked (even when all others are unselected)
if (alwaysTrue == "defaultCheck") {
field[i].checked = true;
}
else {
field[i].checked = false;
}
}
checkflag = "false";
return "Check All";
}
}


// End -->
</script>

<center>

<form name=myform action="" method=post>

<b>Your Favorite Scripts & Languages</b><br>
<input type=checkbox id="checked" name=list value="1" checked>Java<br>
<input type=checkbox id="unchecked" name=list value="2">JavaScript<br>
<input type=checkbox id="unchecked" name=list value="3">ASP<br>
<input type=checkbox id="unchecked" name=list value="4">HTML<br>
<input type=checkbox id="checked" name=list value="5" checked>SQL<br>
<br>
<input type=button value="Check All" onClick="this.value=check(this.form.list)">
<br>
</form>

</center>

caclark
04-13-2005, 06:44 PM
I have gotten it to work after some trial and error.

But for all future post searches the solution I came up with was to add the following variable:

var checkDefault = field[i].id;
to the "unCheck" (else) statement. And then compare that value to a default value I determined.

Full Code As Follows:



<html>
<head>
<title>Untitled</title>


<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

// Function to "Select All" Checkboxes
var checkflag = "false";
function check(field) {
var alwaysTrue = (field.length -1)
if (checkflag == "false") {
for (i = 0; i < field.length; i++) {
field[i].checked = true;}
checkflag = "true";
return "Restore Defaults";
}
else {
for (i = 0; i < field.length; i++) {

var checkDefault = field[i].id;

// Several Fields should always be checked (even when all others are unselected)
if (checkDefault == "checked") {
field[i].checked = true;
}
else {
field[i].checked = false;
}
}
checkflag = "false";
return "Check All";
}
}


// End -->
</script>

</head>

<body>

<form action="" method=post>
<b>Your Favorite Scripts & Languages</b><br>
<input type=checkbox id="checked" name=list value="1" checked>Java<br>
<input type=checkbox id="unchecked" name=list value="2">JavaScript<br>
<input type=checkbox id="unchecked" name=list value="3">ASP<br>
<input type=checkbox id="unchecked" name=list value="4">HTML<br>
<input type=checkbox id="checked" name=list value="5" checked>SQL<br>
<br>
<input type=button value="Check All" onClick="this.value=check(this.form.list)">
<br>
</form>


</body>
</html>

vwphillips
04-13-2005, 06:44 PM
Two ways of many



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var ckBoxAry=new Array();

function CheckBox(cb,txt){
obj=document.getElementById(cb);
obj.ary=new Array();
obj.txt=document.getElementById(txt);
cks=obj.getElementsByTagName('INPUT');
for (i=0;i<cks.length;i++){
if (cks[i].type=='checkbox'){
obj.ary[obj.ary.length]=cks[i];
if (i<cks.length-1){
cks[i].onclick=function(){ change(this.parentNode.ary,this.parentNode.txt); }
}
else {
cks[i].onclick=function(){ CheckAllNone(this.parentNode.ary,this.parentNode.txt); }
}
}
}
change(obj.ary,obj.txt);
}

function change(ary,txt){
ckCnt=0;
for (i=0;i<ary.length;i++){
if (ary[i].checked){
ckCnt++;
}
}
txt.innerHTML='Select All';
if (ckCnt==ary.length-1){
txt.innerHTML='Select None';
}
}

function CheckAllNone(ary,txt){
ary[ary.length-1].checked=false;
checked=true;
if (txt.innerHTML=='Select None'){
checked=false;
}
for (i=0;i<ary.length-1;i++){
ary[i].checked=checked;
}
change(ary,txt);
}

//-->
</script>

</head>

<body onload="CheckBox('CkGroup1','ckAllNone1');CheckBox('CkGroup2','ckAllNone2')" >

<p id="CkGroup1" >
Group 1<br>
<input type="checkbox" name="" checked=true ><br>
<input type="checkbox" name=""><br>
<input type="checkbox" name=""><br>
<input type="checkbox" name=""><br>
<input type="checkbox" name="" ><span id=ckAllNone1 >Select All</span><br>
</p>
<br>
<p id="CkGroup2" >
Group 2<br>
<input type="checkbox" name="" ><br>
<input type="checkbox" name=""><br>
<input type="checkbox" name=""><br>
<input type="checkbox" name=""><br>
<input type="checkbox" name="" ><span id=ckAllNone2 >Select All</span><br>
</p>

</body>

</html>




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

var cks,ckCnt;

function CheckBox(cb){
cks=document.getElementsByTagName('INPUT');
for (i=0;i<cks.length;i++){
if (cks[i].type=='checkbox'){
if (cks[i].title==cb){
change(cks[i])
cks[i].onclick=function(){ change(this); }
document.getElementById(cks[i].title+'Master').onclick=function(){CheckAllNone(cb); }
}
}
}
}

function change(obj){
ckCnt=0;
for (i1=0;i1<cks.length;i1++){
if (cks[i1].title==obj.title){
if (cks[i1].checked){
ckCnt++;
}
}
}
document.getElementById(obj.title+'Master').checked=true;
document.getElementById(obj.title+'Txt').innerHTML='Select All';
if (ckCnt){
document.getElementById(obj.title+'Master').checked=false;
document.getElementById(obj.title+'Txt').innerHTML='Select None';
}
}

function CheckAllNone(tit){
ckCnt=0;
for (i1=0;i1<cks.length;i1++){
if (cks[i1].title==tit){
obj=cks[i1];
if (cks[i1].checked){
ckCnt=1;
}
}
}
for (i2=0;i2<cks.length;i2++){
if (cks[i2].title==tit){
if (ckCnt){
cks[i2].checked=false;
}
else {
cks[i2].checked=true;
}
}
}
change(obj);
}

//-->
</script>

</head>

<body onload="CheckBox('fred');CheckBox('tom')" >

<p >
Group 1<br>
<input title="fred" type="checkbox" name="" checked=true ><br>
<input title="fred" type="checkbox" name=""><br>
<input title="fred" type="checkbox" name=""><br>
<input title="fred" type="checkbox" name=""><br>
<input id="fredMaster" type="checkbox" name=""><span id="fredTxt" >Select All</span><br>
</p>
<br>
<p >
Group 2<br>
<input title="tom" type="checkbox" name="" ><br>
<input title="tom" type="checkbox" name=""><br>
<input title="tom" type="checkbox" name=""><br>
<input title="tom" type="checkbox" name=""><br>
<input id="tomMaster" type="checkbox" name="" ><span id="tomTxt" >Select All</span><br>
</p>

</body>

</html>




ids must have a unique name hence I've used title



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum