0

我将以下 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部分工作。

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

4

2 回答 2

2

只要在 IE 7 中打开调试器，您就会看到问题 - 按 F12

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

IE不喜欢作为ID，以9作为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;
        }
    }
}
于 2013-04-06T07:05:30.673 回答
1

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

您应该始终使用

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

包含 document.getElementsByTagName 的数组和集合

于 2013-04-06T06:55:06.543 回答