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.

@Matrix—`getElementsByName` "works" in IE (it's part of the [DOM 2 HTML spec](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-71555259)), but IE treats ID and NAME attributes as the same thing. — RobG, Mar 16 '12 at 07:34

jfriend00 · Accepted Answer · 2012-03-16T07:15:29.940

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:

Declare checkboxes as a local variable so it's not accidentally a global variable.
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.
There is no need for the javascript: prefix on event handlers in the HTML.

+1. I would add that the OP should put the checkboxes in a form, then they can be referenced as `document.formName.category`, using property access should be faster than a method (not that speed is important, but it's more logical in the code). — RobG, Mar 16 '12 at 07:36

Sudhir Bastakoti · Answer 2 · 2012-03-16T07:45:32.047

1

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

edited Mar 16 '12 at 07:45

answered Mar 16 '12 at 07:11

Sudhir Bastakoti

99,167
15
158
162

I think you meant "if it's a form". – RobG Mar 16 '12 at 07:37

score 1 · Answer 3 · answered Mar 16 '12 at 07:51

1

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.

answered Mar 16 '12 at 07:51

Nishi

352
1
6

check all checkboxes using javascript is not working in IE

3 Answers3