Javascript检查在IE7中不起作用

Question

我对以下HTML进行了编辑，以使其更简短、更易于理解：

<input type='checkbox' name='All' value='All' id='All' onclick='toggleAll(this)'/>
    <label for='All'> Everyone</label>
<input type='checkbox' name='Resp' value='Resp' id='Resp' onclick='toggleResp(this)'/>
    <label for='Resp'> Responsibles</label>
<input type='checkbox' name='9' value='9' id='9' onclick='toggleDept(this)' />
    <label for='9'> Department 9</label>
<input type='checkbox' name='3-9-9' value='3-9-9' id='3-9-9' />
    <label for='3-9-9'> Responsible Personnel 9</label>
<input type='checkbox' name='4-9-10' value='4-9-10' id='4-9-10' />
    <label for='4-9-10'> General Personnel 10</label>
<input type='checkbox' name='4-9-11' value='4-9-11' id='4-9-11' />
    <label for='4-9-11'> General Personnel 11</label>

在名称4-9-10中，4代表用户类型，如果小于4，则用户为responsible。9代表部门ID，10代表人员ID。

当我单击复选框All时，所有复选框都被选中：

function toggleAll(source) {
    inputs = document.getElementsByTagName("input");
    for (var i in inputs) {
        if(inputs[i].type == "checkbox") {
            inputs[i].checked = source.checked;
        }
    }
}

当我点击复选框Resp时，所有负责人的复选框都会被选中：

function toggleResp(source) {
    inputs = document.getElementsByTagName("input");
    for (var i in inputs) {
        if (inputs[i].type == "checkbox") {
            if(parseInt(inputs[i].name.substring(0, inputs[i].name.indexOf("-"))) < 4)
                inputs[i].checked = source.checked;
        }
    }
}

当我点击一个部门的复选框时，部门人员的复选框就会被选中：

function toggleDept(source) {
    inputs = document.getElementsByTagName("input");
    deptId = source.name;
    for (var i in inputs) {
        if (inputs[i].type == "checkbox") {
            index = inputs[i].name.indexOf("-");
            lastIndex = inputs[i].name.lastIndexOf("-");
            iDeptId = inputs[i].name.substring(index + 1, lastIndex);
            if (index != -1 && iDeptId == deptId.toString())
                inputs[i].checked = source.checked;
        }
    }
}

我有三个部门和不同数量的人员。在Firefox、Chrome和Yandex中，一切都运行得很好。然而，这只在IE7中部分起作用。例如，当我按下All时，只检查部门职责和部门，根本不检查部门。Responsible check和Department也部分工作。

我的问题是:在我的代码中是否存在与早期版本的IE7不兼容的函数或HTML元素？

Answer 1

一旦在IE 7中打开调试器，您就会看到这个问题--按F12

'inputs[...].type' is null or not an object

IE不喜欢'9'作为ID，当它运行ID为9的inputs[i]时会抛出异常

正如mplungjan提到的，最好像下面这样修改你的JavaScript。不过只修改了第一个

function toggleAll(source) {
    inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        var input = inputs[i];
        if(input.type == "checkbox") {
            input.checked = source.checked;
        }
    }
}

Answer 2

在迭代集合和数组时，请不要使用for in循环

您应该始终使用

for (var i=0, n=collection.length;i<n;i++)

使用数组和集合，document.getElementsByTagName是