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 4 of 4

Thread: Checkboxes

  1. #1
    New Coder
    Join Date
    Dec 2005
    Posts
    18
    Thanks
    0
    Thanked 1 Time in 1 Post

    Checkboxes

    Here is the code I currently have (I took out a lot of the options to make it less code)

    Code:
    <form name="effects" action="" method="POST">  
    <input type="checkbox" name="box[]" value="1">Army change name<br> 
    <input type="checkbox" name="box[]" value="2">Army damage<br> 
    <input type="submit" name="check" value="SEND">  
    </form>
    I can't get the "check all" and "uncheck all" script to work with this code, any help? Also can I have a "group select" button. Example:

    ([]=checkbox) ([button])
    Code:
    [check all]
    [uncheck all]
    
    []Select all army
    [] army...
    [] army...
    [] army...
    [] army...
    
    []Select all QV
    [] QV...
    [] QV...
    [] QV...
    Thats the basic layout I want. Thanks for all the help!

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    function CkAllNone(f,obj){
     var eles=f.elements;
     for (zxc0=0;zxc0<eles.length;zxc0++){
      if (eles[zxc0].type=='checkbox'){
       eles[zxc0].checked=obj.checked
      }
     }
    }
    
    function CkAllNoneName(f,obj){
     var eles=f.elements;
     for (zxc0=0;zxc0<eles.length;zxc0++){
      if (eles[zxc0].type=='checkbox'&&eles[zxc0].name==obj.name){
       eles[zxc0].checked=obj.checked
      }
     }
    }
    //-->
    </script>
    </head>
    
    <body>
    <form name="effects" action="" method="POST">
    <input type="checkbox" name="box1[]" value="1">Army change name<br>
    <input type="checkbox" name="box[]" value="1">Army change name<br>
    <input type="checkbox" name="box[]" value="2">Army damage<br>
    <input type="checkbox" value="2" name="box[]" onclick="CkAllNoneName(this.form,this);" >check All/None this name<br>
    <input type="checkbox" value="2" onclick="CkAllNone(this.form,this);" >check All/None<br>
    <input type="submit" name="check" value="SEND">
    </form>
    </body>
    
    </html>

  • #3
    New Coder
    Join Date
    Dec 2005
    Posts
    18
    Thanks
    0
    Thanked 1 Time in 1 Post
    Wow... uhh... thanks a ton.

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Fwiw…

    e.g.

    toggler.js
    Code:
    function toggleAll(trgtEl,checkVal) {
    
    	var obj = document.getElementById(trgtEl);
    	var inputs = obj.getElementsByTagName('input');
    
    	for (var i=0; i<inputs.length; i++) {
    		if (inputs[i].type == 'checkbox') {
    			inputs[i].checked = (trgtEl=='checkForm') ? checkVal : document.getElementById('toggle-'+trgtEl).checked;
    		}
    	}
    
    }
    markup
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<title>test</title>
    	<script type="text/javascript" src="toggler.js"></script>
    </head>
    <body>
    
    <form action="/" method="post" id="checkForm">
    
    	<fieldset id="controls">
    
    		<button type="button" value="check all" onclick="toggleAll('checkForm',true);">Check all</button><br />
    		<button type="button" value="uncheck all" onclick="toggleAll('checkForm');">Uncheck all</button>
    
    	</fieldset>
    
    	<fieldset id="army">
    
    		<label><input type="checkbox" onchange="toggleAll('army');" id="toggle-army" /> Select all Army</label><br /><br />
    		<label><input type="checkbox" /> Army...</label><br />
    		<label><input type="checkbox" /> Army...</label><br />
    		<label><input type="checkbox" /> Army...</label><br />
    		<label><input type="checkbox" /> Army...</label><br />
    
    	</fieldset>
    
    	<fieldset id="qv">
    
    		<label><input type="checkbox" onchange="toggleAll('qv');" id="toggle-qv" /> Select all QV</label><br /><br />
    		<label><input type="checkbox" /> QV...</label><br />
    		<label><input type="checkbox" /> QV...</label><br />
    		<label><input type="checkbox" /> QV...</label><br />
    		<label><input type="checkbox" /> QV...</label><br />
    
    	</fieldset>
    
    </form>
    
    </body>
    </html>


  •  

    Posting Permissions

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