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

In＆＃34; pure＆＃34; 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!

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

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

5 个答案: