SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Addict scoobasteve1982's Avatar
    Join Date
    Apr 2007
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Select all an array of checkboxes

    Hi there,

    I want to select an array of checkboxes...the checkboxes must be named like the following:

    Code:
    <input type="checkbox" name="box[]"> box label
    I need to have the [] characters in the name attribute because I'm submitting them via PHP and need to access them as an array. I was able to do it without them but it broke my script so I had to revert back. Does anyone know of how I could do this in JavaScript? I just want to provide a link that will select all of these check boxes or unselect all of these check boxes. Thanks!

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Just curious, but does the name "box[]" validate, especially since name shoudl be unique. On the PHP end, I recommend naming them something like box1, box2, box3, etc., and then you can have a for loop, something like this:

    Code:
    for($i=0; $i<numOfBoxes; $i++)
    {
     if(isset($_POST['box' . $i]))
       // Do something here if checked.
    }
    You could do something similar to this with Javascript as well, just using a for loop and going through each of them the same way:
    Code:
    for(i=0; i<numOfBoxes; i++)
    {
     document.getElementById("box" + i).checked = true;
    }
    Not sure if that's the exact code, but it's something very similar.

    However, with all that being said, I commend taking out some of the dynamic-ness of the page, and give each box a meaningful name and id, instead of just a generic name.

  3. #3
    SitePoint Addict scoobasteve1982's Avatar
    Join Date
    Apr 2007
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    samanime, thanks, I think I tried that already but I'll try again. I was going to use unique names and I'd for each but it posed a problem. I'm not sure what though...but again, thank you!

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quickly created this page should do what you are after I had to add a div around the checkboxes so that I could reference the them from javascript and so that I could create the link to select all. I have used javascript to create the link so that there is not a useless link on the page if javascript is disabled.

    Hope this helps

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    	<title>Text Page</title>
    </head>
    <body>
    	
    	<div id="options">
    		<label><input type="checkbox" name="box[]">box label<label><br />
    		<label><input type="checkbox" name="box[]">box label<label><br />
    		<label><input type="checkbox" name="box[]">box label<label><br />
    		<label><input type="checkbox" name="box[]">box label<label><br />
    		<label><input type="checkbox" name="box[]">box label<label><br />
    		<label><input type="checkbox" name="box[]">box label<label><br />
    		<label><input type="checkbox" name="box[]">box label<label><br />
    	</div>
    	
    	
    	<script type="text/javascript" charset="utf-8">
    		var selectAll = function(){
    			//default link text
    			var defaultText = 'Select All'	
    			var altText = 'Un-Select All'	
    		
    			//function to change state off checkboxes
    			function change(){
    				var inputs = document.getElementById('options').getElementsByTagName('input');
    				var link = document.getElementById('selectAll')
    				for(var i=0;i<inputs.length;i++){
    					if(inputs[i].type == 'checkbox'){
    						if(inputs[i].checked == true){
    							inputs[i].checked = false;
    							link.innerHTML = altText;
    						}else{
    							inputs[i].checked = true;
    							link.innerHTML = defaultText;
    						}
    					}
    				}
    			}
    			
    			//function to add the select all link
    			function addLink(){
    				var options = document.getElementById('options');
    				var a = document.createElement('a');
    				a.setAttribute('href', '#');
    				a.setAttribute('id', 'selectAll');
    				var txt = document.createTextNode(defaultText);
    				a.appendChild(txt);
    				a.onclick = change;
    				options.appendChild(a);
    			}
    			
    			return {
    				init : function(){
    					addLink();
    				}
    			}
    		}();
    		
    		window.onload = function(){
    			selectAll.init();
    		}
    	</script>
    </body>
    </html>

  5. #5
    SitePoint Addict scoobasteve1982's Avatar
    Join Date
    Apr 2007
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mortimer, very nice, thank you! Oh and btw, based on how you've written your code here, if you haven't already you may want to check out the Ext JS framework. Check it out at http://www.extjs.com - VERY NICE! Best I've seen yet.

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not a problem, glad to help


Bookmarks

Posting Permissions

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