如何在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;
}