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

my javascript has some mistake in checkbox checking

本文关键字：错误 检查 JavaScript 复选框 我的      更新时间：2023-09-26

我的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;}
                };
    };

你应该检查 checked 属性是否真实/伪造，因为checked属性是一个布尔值。喜欢这个：

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>

你的答案：使用 checked 属性，它是一个布尔值，所以你不需要将其与 'checked' 进行比较。

其次：重写它，因此代码:)更少

        var count = 0;
        for (var index = 1; index<= 10; index++){
           if(document.getElementById("pid" + index).checked){
                    count++;
           }
        }

<form action="some.php" id="myForm" method="POST">
    <input type="checkbox" name="some1" value="" id="some1">
    <label for="some1">title of checkbox 1</label>
    <input type="checkbox" name="some2" value="" id="some2">
    <label for="some2">title of checkbox 2</label>
    <input type="checkbox" name="some3" value="" id="some3">
    <label for="some3">title of checkbox 3</label>
</form>

$(function(){
    var form = $("#myForm");
    form.submit(function(e){
       if(form.find("input[type=checkbox]:checked").length > 0){
       } else{
       }
    });
});

假设pidX是checkbox类型的input，则无需将.checked与"checked"进行比较。

另外，使用循环...

window.onload = function() {
    document.getElementById('submitbtn').onclick = function() {
        var count = 0;
        for(var i = 1; i <= 10; i++) {
            if (document.getElementById("pid" + i).checked) {
                count++;
            }
        }
        alert(count);
        if (count == 0) {
            alert("Please select at least 1 product");
            return false;
        }
        document.getElementById("formreturn").submit();
        return false;
    };
};
相关文章：