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

我有3个部门和不同数量的人员。 Firefox，Chrome和Yandex中的一切都很棒。但是，这仅在IE7中有效。例如，当我按下All时，只检查部门负责人和部门，根本不检查部门。 Responsible检查Department也可以部分运行。

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

Answer 1

在IE 7中打开调试器后，您将看到问题 - 按F12

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

IE不喜欢'9'作为ID，并且在运行inputs[i]并以9作为ID

时会引发异常

正如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为

的数组和集合

Javascript检查在IE7中不起作用

2 个答案: