Select all checkboxes using JavaScript

JavaScript
1

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?

<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

Hi there,

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

<!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

Thank you very much Pullo. There was one small issue with the code on the following line:

var selectControl = document.getElementById("selectControl");

The ID should be “selectall” instead of “selectControl” like below:

var selectControl = document.getElementById("selectall");

Now it works just fine on IE too. Thank you.

4

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.

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