JS .checked 无法在 for ... 循环中工作 - 在 IE11 中

Question

我有以下功能，它在 chrome 中运行良好，但在 IE 11 中却没有。

它旨在：

取一个 questionGroup 值来确定我们想要哪组问题的平均分数
获取页面上输入的集合
遍历它们
如果他们是 'checked'，则获取 class 名称，该名称确定问题所在的组
数一数我们正在寻找的小组中的问题数量
获取组内所有问题的总分

将总分除以问题数得到小组的平均分

function getGroupScore(questionGroup) {
    var inputs = document.getElementsByTagName("input");
    var countOfQs = 0;
    var totalGroupScore = 0;

    for (var element in inputs) {

        if (inputs[element].checked) {

            var theQuestionsGroup = inputs[element].className;

            if (theQuestionsGroup == questionGroup) {

                var answer = parseInt(inputs[element].value)

                totalGroupScore += answer;

                countOfQs++;

            }
        }
    }

    var groupScore = totalGroupScore / countOfQs;

    return groupScore;
}

在调试中，循环似乎永远不会通过以下阶段：

if (inputs[element].checked)

即使有输入字段被选中

我正在遍历的表单示例：

<form action="">
    <table style="margin: 0 auto; border: none;" id="reschecklist">
        <tbody>
            <tr>
                <td rowspan="3" valign="top" width="400"><h3>Questions</h3></td>
                <td colspan="5" class="center"><h3>Score</h3></td>
            </tr>
            <tr>
                <td colspan="2" class="left"><strong>(not at all)</strong></td>
                <td colspan="3" align="right" class="right"><strong>(I am fully implementing this)</strong></td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td class="heading" width="400"><strong>Minimise overhead costs</strong></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td class="question"><p>Do you consider and identify ways to maintain machinery better and cheaper?</p></td>
                <td><input type="radio" name="q1" value="1" class="grp1" /></td>
                <td><input type="radio" name="q1" value="2" class="grp1" /></td>
                <td><input type="radio" name="q1" value="3" class="grp1" /></td>
                <td><input type="radio" name="q1" value="4" class="grp1" /></td>
                <td><input type="radio" name="q1" value="5" class="grp1" /></td>
            </tr>
            <tr>
                <td class="question"><p>Do you regularly review your overhead costs i.e. can you identify how much they cost you on a monthly, 6 monthly, annual basis?</p></td>
                <td><input type="radio" name="q2" value="1" class="grp1" /></td>
                <td><input type="radio" name="q2" value="2" class="grp1" /></td>
                <td><input type="radio" name="q2" value="3" class="grp1" /></td>
                <td><input type="radio" name="q2" value="4" class="grp1" /></td>
                <td><input type="radio" name="q2" value="5" class="grp1" /></td>
            </tr>
            <tr>
                <td class="heading" width="400"><strong>Set goals and budgets</strong></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td class="question"><p>Do you have a clearly set out vision and objectives for the business?</p></td>
                <td><input type="radio" name="q3" value="1" class="grp2" /></td>
                <td><input type="radio" name="q3" value="2" class="grp2" /></td>
                <td><input type="radio" name="q3" value="3" class="grp2" /></td>
                <td><input type="radio" name="q3" value="4" class="grp2" /></td>
                <td><input type="radio" name="q3" value="5" class="grp2" /></td>
            </tr>
            <tr>
                <td class="question"><p>Do you routinely (every 3-6 months), with your partner/s or your team, take a hands off view of the business and discuss objectives, performance etc?</p></td>
                <td><input type="radio" name="q4" value="1" class="grp2" /></td>
                <td><input type="radio" name="q4" value="2" class="grp2" /></td>
                <td><input type="radio" name="q4" value="3" class="grp2" /></td>
                <td><input type="radio" name="q4" value="4" class="grp2" /></td>
                <td><input type="radio" name="q4" value="5" class="grp2" /></td>
            </tr>

Answer 1

for-in 不是您循环访问 HTMLCollection 的方式。使用简单的 for 或 one of the "array like" approaches in this answer（这也解释了为什么 for-in 不是这里的正确选择）。我怀疑问题是在您遇到问题的平台上的 HTMLCollection 中没有可枚举的属性。

例如：

for (var element = 0 ; element < inputs.length; ++elements) {

在现代环境中，HTMLCollection（你从 getElementsByTagName 得到的）可能有非标准扩展使其可迭代（ES2015+）并给它一个 forEach。如果没有，您可以轻松添加它：

if (typeof NodeList !== "undefined" &&
    NodeList.prototype &&
    !NodeList.prototype.forEach) {
    // Yes, direct assignment is fine here, no need for `Object.defineProperty`
    NodeList.prototype.forEach = Array.prototype.forEach;
}
if (typeof HTMLCollection !== "undefined" &&
    HTMLCollection.prototype &&
    !HTMLCollection.prototype.forEach) {
    // Yes, direct assignment is fine here, no need for `Object.defineProperty`
    HTMLCollection.prototype.forEach = Array.prototype.forEach;
}

该代码同时执行 HTMLCollection 和 NodeList（您从 querySelectorAll 获得的内容）。然后你可以使用：

inputs.forEach(function(input) {
    if (input.checked) {
        // ...
    }
});

JS .checked 无法在 for ... 循环中工作 - 在 IE11 中

JS .checked not working in for ... in loop - in IE11

javascript

loops

internet-explorer-11