Select all checkboxes using JavaScript

**nayen** · Nov 27, 2012 05:31

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>

**Pullo** · Nov 27, 2012 06:36

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

**nayen** · Nov 27, 2012 06:45

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.

**Pullo** · Nov 27, 2012 06:54

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)};
};

User Tag List

Thread: Select all checkboxes using JavaScript

Thread Tools

Display

Hybrid View

Select all checkboxes using JavaScript

Bookmarks

Bookmarks

Posting Permissions