I am trying to check all checkboxes by onclick event on a checkbox labeled 'Select All'. The code is working fine in FF,Chrome but not working in IE. The code is as below:

<script type="text/javascript">
function toggle(source) {
checkboxes = document.getElementsByName('category');
for(var i in checkboxes)
 checkboxes[i].checked = source.checked;
}
</script>

<input type="checkbox" name="selectAll" id="selectAll" onClick="javascript :toggle(this)" />Select All Categories

<input type="checkbox" name="category" id="category1" />category1
<input type="checkbox" name="category" id="category2" />category2
<input type="checkbox" name="category" id="category3" />category3

Any help would be appreciated.

I am trying to check all checkboxes by onclick event on a checkbox labeled 'Select All'. The code is working fine in FF,Chrome but not working in IE. The code is as below:

<script type="text/javascript">
function toggle(source) {
checkboxes = document.getElementsByName('category');
for(var i in checkboxes)
 checkboxes[i].checked = source.checked;
}
</script>

<input type="checkbox" name="selectAll" id="selectAll" onClick="javascript :toggle(this)" />Select All Categories

<input type="checkbox" name="category" id="category1" />category1
<input type="checkbox" name="category" id="category2" />category2
<input type="checkbox" name="category" id="category3" />category3

Any help would be appreciated.

• javascript
• html

Share Improve this question Follow asked Mar 16, 2012 at 6:57 heyanshuklaheyanshukla 66988 silver badges1717 bronze badges 1

• @Matrix—getElementsByName "works" in IE (it's part of the DOM 2 HTML spec), but IE treats ID and NAME attributes as the same thing. – RobG Commented Mar 16, 2012 at 7:34

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

This cleaned up version put into a jsFiddle is working fine here in IE: http://jsfiddle/jfriend00/m7T2S/.

function toggle(source) {
    var checkboxes = document.getElementsByName('category');
    for (var i = 0; i < checkboxes.length; i++)
        checkboxes[i].checked = source.checked;
}​

So, there must be something else going on in your actual page that you aren't showing us.

The cleanups I did on your code are:

1. Declare checkboxes as a local variable so it's not accidentally a global variable.
2. Iterate through the checkboxes array with a for (var i = 0; i < array.length; i++) loop. Arrays should never be iterated with (for i in array) because that iterates properties of the object, not just array elements.
3. There is no need for the javascript: prefix on event handlers in the HTML.

If its form then you could do like following instead of getElementsByName:

function toggle(source) {
    var field = document.formname.category;
    for (i = 0; i < field.length; i++) {
       field[i].checked = source.checked;
    }
}

Replace your function with below one

function toggle(source)
{ 
    checkboxes = document.getElementsByName('category'); 
    for(i=0;i<checkboxes.length;i++)
    checkboxes[i].checked = source.checked;
}

It works for IE8, I have tested.