Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2002
    Location
    Setting in a tall corn field in Indiana
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need Help With "Select All" Checkboxes

    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>

  • #2
    New Coder
    Join Date
    Oct 2002
    Location
    Setting in a tall corn field in Indiana
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    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
    Last edited by vwphillips; 04-13-2005 at 07:53 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •