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，则用户是负责。 9代表部门ID，10代表人员ID。

当我单击复选框全部时，所有复选框都会被选中:

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 元素？

Answer 1

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

'inputs[...].type' 为 null 或不是对象

IE 不喜欢 '9' 作为 ID，并且当它以 9 作为 ID 运行 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;
        }
    }
}