使用 javascript 填充时的字段数答案

【问题标题】：Count of fields when populated using javascript使用 javascript 填充时的字段数
【发布时间】：2016-06-26 17:07:56
【问题描述】：

我有一个推荐表单，其中包含几个复选框和下拉菜单。

我想做的是统计用户使用 JavaScript 或 Jquery 填充的字段数。我以冗长的格式编写了脚本，并且可以正常工作，但是有没有办法缩短或简化以下脚本。我是初学者。

 function RecomendationCount() {
     var Rec01 = 0;
     var Rec02 = 0;
     var Rec03 = 0;
     var Rec04 = 0;
     var Rec05 = 0;
     var Rec06 = 0;
     var Rec07 = 0;
     var Rec08 = 0;
     var Rec09 = 0;
     var Rec10 = 0;
     if (document.getElementById("Q68I1065").value != "") {
         Rec01 = 1 //FluidRegimeChanges
     }
     if (document.getElementById("Q81I10781").checked == true) {
         Rec02 = 1 //Ue
     }
     if (document.getElementById("Q82I10791").checked == true) {
         Rec03 = 1 //VenousLactate
     }
     if (document.getElementById("Q83I10801").checked == true) {
         Rec04 = 1 //VenousBicarbonate
     }
     if (document.getElementById("Q84I10811").checked == true) {
         Rec05 = 1 //Fbc
     }
     if (document.getElementById("Q86I10831").checked == true) {
         Rec06 = 1 //BloodCultures
     }
     if (document.getElementById("Q87I10841").checked == true) {
         Rec07 = 1 //UrineCytometryCulture
     }
     if (document.getElementById("Q88I10851").checked == true) {
         Rec08 = 1 //RenalUltrasound
     }
     if (document.getElementById("Q89I10861").checked == true) {
         Rec09 = 1 //OtherImaging
     }
     if (document.getElementById("Q90I10871").checked == true) {
         Rec10 = 1 //SuspendPlannedContrastImaging
     }
     var totalRec = (Rec01 + Rec02 + Rec03 + Rec04 + Rec05 + Rec06 + Rec07 +
         Rec08 + Rec09 + Rec10);
     y = document.getElementById("test");
     y.innerHTML = totalRec;
 }

下面是html

    <table>
                            <tr >
                                <td >Fluid regime changes</td>
                                <td>

                                 <select name="Q68I1065" id="Q68I1065" onclick="RecomendationCount();" >
                                        <option value=""></option>
                                        <option value="0">None</option>
                                        <option value="1">Start or increase oral</option>
                                        <option value="2">Decrease or stop oral</option>
                                        <option value="3">Start or increase IV</option>
                                        <option value="4">Decrease or stop IV</option>
                                        <option value="9">Other</option>
                                 </select>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox" name="Q81I1078" id="Q81I10781" value="1" onclick="RecomendationCount();">
                                    <label >U&E </label></input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox" name="Q82I10791" id="Q82I10791" value="1" onclick="RecomendationCount();">
                                    <label >VenousLactate</label></input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox" name="Q83I10801" id="Q83I10801" value="1" onclick="RecomendationCount();">
                                    <label >VenousBicarbonate</label></input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox" name="Q84I10811" id="Q84I10811" value="1" onclick="RecomendationCount();">
                                    <label >Fbc</label></input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox" name="Q86I10831" id="Q86I10831" value="1" onclick="RecomendationCount();">
                                    <label >BloodCultures</label></input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox" name="Q87I10841" id="Q87I10841" value="1" onclick="RecomendationCount();">
                                    <label >UrineCytometryCulture</label></input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox" name="Q88I10851" id="Q88I10851" value="1" onclick="RecomendationCount();">
                                    <label >RenalUltrasound</label></input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox" name="Q89I10861" id="Q89I10861" value="1" onclick="RecomendationCount();">
                                    <label >OtherImaging</label></input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox" name="Q90I10871" id="Q90I10871" value="1" onclick="RecomendationCount();">
                                    <label >SuspendPlannedContrastImaging</label></input>
                                </td>
                            </tr>
                        </table>

非常感谢您的帮助和建议。谢谢

【问题讨论】：

你能发布带有复选框的 HTML 吗？
我已经发布了html，请查看更新后的帖子
看看我的回答
使用 javascript 代替 jquery 有什么建议吗？谢谢

标签： javascript jquery html arrays arraylist

【解决方案1】：

如果你给你的所有复选框都放了一个通用类（例如“CheckboxesToCount”，你可以使用这行代码来计算有多少个复选框被选中：

$(".CheckboxesToCount:checked").length

使用 Javascript + HTML 示例：

<script>
    var count = 0;
    function updateCount(checkbox) {
        if(checkbox.checked) {
            count++;
        } else {
            count--;
        }
    }

    function count()
    {
        alert(count);
    }
</script>
<input type="button" value="Count" onClick="count();">
<input type="checkbox" onClick="updateCount(this);"><br>
<input type="checkbox" onClick="updateCount(this);"><br>
<input type="checkbox" onClick="updateCount(this);"><br>
<input type="checkbox" onClick="updateCount(this);"><br>
<input type="checkbox" onClick="updateCount(this);"><br>

【讨论】：

【解决方案2】：

您可以使用 css 选择器来查找 :checked inputs。这将返回一个array，您可以检查length 属性。

document.querySelectorAll('input[type="checkbox"]:checked').length;

Demo

【讨论】：

【解决方案3】：

使用 jQuery 这应该可以完成这项工作：

var number = $("input[type=checkbox]:checked").add(
    $("select[value!='']")
).length

【讨论】：

【解决方案4】：

现在有很多使用 jQuery 的解决方案。

如果您只想计算选定的框，这些功能就可以完成。但也许你想稍后对你的数据做其他事情。那么“长度”解决方案就不够了。您要求重构代码以使其更干净。所以我只是做了一点，这可能不是最好或最简单的解决方案，但它是你的代码而不忽略DRY-principle

代码未经测试，但应该可以工作。

function RecomendationCount() {
    var checkBoxes = {
        "Q68I1065" : 0,
        "Q81I10781" : 0,
        "Q82I10791" : 0,
        "Q83I10801" : 0,
        "Q84I10811" : 0,
        "Q86I10831" : 0,
        "Q87I10841" : 0,
        "Q88I10851" : 0,
        "Q89I10861" : 0,
        "Q90I10871" : 0
    };
    checkBoxes = check(checkBoxes);

    var totalRec = countChecked(checkBoxes);
    y = document.getElementById("test");
    y.innerHTML = totalRec;
}

function check (checkBoxes) {
    var updatedArray = checkBoxes;
    for (var key in checkBoxes) {
        if (document.getElementById(key).checked == true) {
            updatedArray[key] = 2;
        }
        updatedArray[key] = 1;
    }
    return updatedArray;
}

function countChecked(checkBoxes) {
    var count = 0;
    for (var key in checkBoxes) {
        count+= checkBoxes[key];
    }
    return count;
}

【讨论】：