Question

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.

Answer 1

This cleaned up version put into a jsFiddle is working fine here in IE: http://jsfiddle.net/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.