如何在JavaScript中选择多个复选框验证

Question

这是我的表格。 我需要使用JavaScript进行验证。 验证中至少选中一个复选框。 我希望大家都明白我的需求。 请给我解决方案。 如果有任何疑问，请随时询问。

<form action="#" method="post" name="studentregistration" onsubmit="return(validate());">

        <table cellpadding="3" width="100%" align="center" cellspacing="3">
            <tr>
                <td>Hobby</td>
                <td>
                    <input type="checkbox" name="hobby" value="Chess" id="hobby">Chess
                    <input type="checkbox" name="hobby" value="Music" id="hobby">Music<br>
                    <input type="checkbox" name="hobby" value="Cricket" id="hobby">Cricket
                    <input type="checkbox" name="hobby" value="Reading" id="hobby">Reading
                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" name="Submit Form" value="Submit Form" id="submitform">
                </td>
            </tr>
        </table>

</form>

Answer 1

如果您要尝试验证是否至少选中了一个复选框，则使用jQuery应该可以：

$('input[type="checkbox"]:checked').length > 0

Answer 2

在“纯” js中，您可以删除onsubmit属性，而改为执行以下操作：

document.querySelector('form[name="studentregistration"]').onsubmit = function(e) {
    e.preventDefault();
    var cbx = document.querySelectorAll('form[name="studentregistration"] input[name="hobby"]:checked');
    if(cbx.length > 0) {
        // at least one checked - do something
    }
    else {
        // none checked
    }
}

观看现场演示！

Answer 3

完整的解决方案。

为了在验证后提交表单，您必须使用：

document.getElementById("myForm").submit();

 document.getElementById("submitform").addEventListener("click",submit_form); function submit_form(e){ var ob = ""; var chess = document.getElementById("hobby1").checked; var music = document.getElementById("hobby2").checked; var cricket = document.getElementById("hobby3").checked; var reading = document.getElementById("hobby4").checked; if(chess == true){ ob += "hobby: chess selected!\\n"; } if(music == true){ ob += "hobby: music selected!\\n"; } if(cricket == true){ ob += "hobby: cricket selected!\\n"; } if(reading == true){ ob += "hobby: reading selected!\\n"; } if(ob==""){ alert("No hobbys selected"); } else{ alert(ob); //document.getElementById("myForm").submit(); } //for testing purposes e.preventDefault(); return false; } 

 <form id = "myForm" action="#" method="post" name="studentregistration"> <table cellpadding="3" width="100%" align="center" cellspacing="3"> <tr> <td>Hobby</td> <td> <input type="checkbox" name="hobby" id="hobby1">Chess <input type="checkbox" name="hobby" id="hobby2">Music<br> <input type="checkbox" name="hobby" id="hobby3">Cricket <input type="checkbox" name="hobby" id="hobby4">Reading </td> </tr> <tr> <td> <input type="button" name="Submit Form" value="Submit Form" id="submitform"> </td> </tr> </table> </form> 

Answer 4

if($("#hobby").is(':checked')){
alert("checkbox checked");
}
else{
alert("Please select at least one checkbox");
}

Answer 5

这是另一个简单的答案

var test = document.getElementsByName("hobby[]");
if(test[0].checked==false && test[1].checked==false && test[2].checked==false && test[3].checked==false)
{
    alert("Please Check");
    return false;
}