使用javascript检查所有复选框在IE中不起作用

Question

我试图通过标记为“全选”的复选框的onclick事件检查所有复选框。 该代码在FF，Chrome中可以正常工作，但在IE中则无法工作。 代码如下：

<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

任何帮助，将不胜感激。

Answer 1

放入jsFiddle的此清理版本在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;
}​

因此，您的实际页面中肯定还有其他事情没有在显示给我们。

我对您的代码进行的清理是：

1. 将复选框声明为局部变量，这样就不会偶然将其作为全局变量。
2. 使用for (var i = 0; i < array.length; i++)循环遍历复选框数组。 永远不要使用数组进行迭代(for i in array)因为(for i in array)因为它会迭代对象的属性，而不仅仅是数组元素。
3. HTML中的事件处理程序不需要javascript:前缀。

Answer 2

如果是其形式，则可以使用以下方法代替getElementsByName：

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

Answer 3

用以下一项替换您的功能

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

我测试过，它适用于IE8。