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.

Code:

 

<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:

Code:

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:

Code:

 

<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

PHP Code:


			
<!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>

PHP Code:


			
<!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