Javascript code to select check boxes not working in IE8

Question

I've got the following code to that toggles selecting all checkboxes with a certain name.

The code works great in webkit based browsers but doesn't work at all in IE8.

Selecting toggle all, doesn't select anything.

<label class="checkbox">

<input name="product" type="checkbox" id="7553" value="true" title="option1">
option1
</label>

<label class="checkbox">

<input name="product" type="checkbox" id="65693" value="true" title="option2">
option2
</label>

<label class="checkbox">
<input type="checkbox" onClick="toggle(this)"><strong>Select all</strong>
</label>

Here's the JS

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

Can anyone see why the above doesn't work in IE8?

Thanks

Answer 1

Probably because you should never use for..in on arrays (or, in this case, an array-like object).

Try this:

for( var i=0, l=checkboxes.length; i<l; i++) {
    checkboxes[i].checked = source.checked;
}