javascript - 我的 javascript 在复选框检查中有一些错误

Question

我的 javascript 有问题。我想要做的就是，如果我的用户没有在给定的 10 个复选框中选择任何复选框，那么我想给他一个警告，否则提交表单。我已经编写了一个 js 代码，但即使选中了复选框也无法正常工作。请指出我的错误。这是我的代码。

window.onload = function() {

    document.getElementById('submitbtn').onclick = function() {
                    var count = 0;
                    if(document.getElementById("pid1").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid2").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid3").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid4").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid5").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid6").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid7").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid8").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid9").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid10").checked == "checked")
                    {
                        count++;
                    }
                    alert(count);
                    if(count == 0){
                    alert("Please select atleast 1 product");
                    return false;}
                    else{
                        document.getElementById("formreturn").submit();
                        return false;}
                };
    };

Answer 1

您应该检查 checked 属性是否为真/假，因为 checked 属性是一个 bool 值。像这样:

if (document.getElementById("pid8").checked) { ..

即使在 HTML 中，您也不需要将字符串 "checked" 分配给 "checked"属性。仅存在此属性就足够了。

你可以重写这个:

<input type="checkbox" checked="checked" />

像这样:

<input type="checkbox" checked />

事实上，你可以给它分配任何东西，它会被忽略并被视为存在。

这也行:

<input type="checkbox" checked="DoNotCheck" />

---

我看到您正在尝试计算选中复选框的数量。您可以使用 querySelectorAll 轻松做到这一点。

查看此代码段:

document.getElementById('btn').onclick = function() {
    var l = document.querySelectorAll("input[type=checkbox]:checked").length;
    document.getElementById('result').innerText = l;
}

<input type="checkbox" /><input type="checkbox" /><input type="checkbox" />
<input type="checkbox" /><input type="checkbox" /><input type="checkbox" />
<hr />
<input id="btn" type="button" value="Go" />
<p id="result" ></p>