Question

我有一个推荐表单，其中包含很少的复选框和下拉列表。

我想要的是计算用户使用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>

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

Answer 1

如果您在所有复选框中放置一个公共类（例如＆＃34; CheckboxesToCount＆＃34;，您可以使用以下代码行来计算检查复选框的数量：

$(".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>

Answer 2

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

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

Demo

Answer 3

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

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

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

使用javascript填充时的字段数

4 个答案: