SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Select all checkboxes using JavaScript

    Hi,

    I have a list of checkboxes on my form and also a "Select all" option for the checkboxes. I have the following code which works fine on Firefox, Chrome, Safari and Opera but not on IE 9. Do you have any idea to make this work on IE too?

    HTML Code:
    <script language="JavaScript">
    	function selectAll(source) {
    		checkboxes = document.getElementsByName('colors[]');
    		for(var i in checkboxes)
    			checkboxes[i].checked = source.checked;
    	}
    </script>
    
    <input type="checkbox" id="selectall" onClick="selectAll(this)" />Select All
    <ul>
    	<li><input type="checkbox" name="colors[]" value="red" />Red</li>
    	<li><input type="checkbox" name="colors[]" value="blue" />Blue</li>
    	<li><input type="checkbox" name="colors[]" value="green" />Green</li>
    	<li><input type="checkbox" name="colors[]" value="black" />Black</li>
    </ul>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    It's the getElementsByName method which is causing you headaches in IE.
    Try this. This will work on all browsers:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Check all the boxes</title>
      </head>
      
      <body>
      <form name="myform" method="" action="">
        <label for="red">Red</label>
        <input type="checkbox" name="colors[]" value="red" id="red"/><br />
    
        <label for="blue">Blue</label>
        <input type="checkbox" name="colors[]" value="blue" id="blue"/><br />
    
        <label for="green">Green</label>
        <input type="checkbox" name="colors[]" value="green" id="green"/><br />
    
        <label for="black">Black</label>
        <input type="checkbox" name="colors[]" value="black" id="black"/><br /><br />
        
        <label for="selectall" id="selectControl">Select All</label>
        <input type="checkbox" id="selectall" />
      </form>
      
      <script>
        function Check(frm){
          var checkBoxes = frm.elements['colors[]'];
          for (i = 0; i < checkBoxes.length; i++){
            checkBoxes[i].checked = (selectControl.innerHTML == "Select All") ? 'checked' : '';
          }
          selectControl.innerHTML = (selectControl.innerHTML == "Select All") ? "Unselect All" : 'Select All';
        }
        
        window.onload = function(){
          var selectControl = document.getElementById("selectControl");
          selectControl.onclick = function(){Check(document.myform)};
        };
      </script>
      </body>
    </html>
    References:
    MSDN documentation for getElementsByName method
    Check all the checkboxes - StackOverflow

  3. #3
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much Pullo. There was one small issue with the code on the following line:

    HTML Code:
    var selectControl = document.getElementById("selectControl");
    The ID should be "selectall" instead of "selectControl" like below:

    HTML Code:
    var selectControl = document.getElementById("selectall");
    Now it works just fine on IE too. Thank you.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Oops, sorry, you're quite right.
    I should've used onchange for the checkbox.
    Now it works if you click the label or the box itself.

    Code JavaScript:
    function Check(frm){
      var checkBoxes = frm.elements['colors[]'];
      var selectControl = document.getElementById("selectControl");
      for (i = 0; i < checkBoxes.length; i++){
        checkBoxes[i].checked = (selectControl.innerHTML == "Select All") ? 'checked' : '';
      }
      selectControl.innerHTML = (selectControl.innerHTML == "Select All") ? "Unselect All" : 'Select All';
    }
     
    window.onload = function(){
      document.getElementById("selectall").onchange = function(){Check(document.myform)};
    };


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
  •