check all checkboxes using javascript is not working in IE

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.

Answer 2

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

Answer 3

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.