如何在javascript中选择多个复选框验证答案

【问题标题】：how to select multiple checkbox validation in javascript如何在javascript中选择多个复选框验证
【发布时间】：2017-05-01 06:47:35
【问题描述】：

这是我的表格。我需要在 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>

【问题讨论】：

我需要在选择框中至少选择一个
您使用提交表单的方式，是否选中复选框都没有关系。验证后才能提交表单。

标签： javascript jquery html css function

【解决方案1】：

如果您尝试验证是否至少选中了一个复选框，那么这应该适用于您使用 jQuery：

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

【讨论】：

【解决方案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
    }
}

See a live demo!

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案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;
}

【讨论】：