提交表單時至少需要1個復選框

Question

我有一個帶有很多復選框的表格。 用戶必須至少選擇其中之一來提交表單。 我已經測試了此處找到的其他堆棧，但均未成功。 這是我的HTML代碼：

 <form id="formnewsletter" action="mypage"> <input name="list" value="1" type="hidden"> <input class="form-control" id="email" name="email" value="" placeholder="Email" required="required" type="email"> <div class="formphonebox"> <input class="form-control" id="prefix" name="prefix" value="0039" style="display:inline; width:25%;" type="text"> <input class="form-control" id="number" name="number" value="" placeholder="Cellulare" style="width:70%; float:right" type="text"> </div> <hr> <div class="formlistbox"> <span class="checkbox"> <input class="listchecknewsletter" value="26" id="group26" name="group" type="checkbox"> <label for="group26">group26</label> </span> <span class="checkbox"> <input class="listchecknewsletter" value="47" id="group47" name="group" type="checkbox"> <label for="group47">group47</label> </span> <span class="checkbox"> <input class="listchecknewsletter" value="41" id="group41" name="group" type="checkbox"> <label for="group41">group41</label> </span> <span class="checkbox"> <input class="listchecknewsletter" value="55" id="group55" name="group" type="checkbox"> <label for="group55">group55</label> </span> <span class="checkbox"> <input class="listchecknewsletter" value="30" id="group30" name="group" type="checkbox"> <label for="group30">group30</label> </span> <span class="checkbox"> <input class="listchecknewsletter" value="58" id="group58" name="group" type="checkbox"> <label for="group58">group58</label> </span> </div> <hr> <span class="checkbox"> <input id="privacycheck" type="checkbox" required="required"> <label for="privacycheck"><small><a href="#">Privacy Policy</a></small></label> </span> <div align="center"> <button type="submit" name="Submit" class="btn btn-danger" value="Iscrivimi">Iscrivimi</button> </div> </form> 

更新解決方案。 這是在我的情況下有效的腳本：

//controlla che almeno un checkbox delle liste/gruppi newsletter sia flaggato
$(document).ready(function () {

    function checkMe() {
        document.getElementById("formnewsletter").onsubmit = function() {
            //controlla che almeno un checkbox delle liste/gruppi newsletter sia flaggato
            if (document.querySelector('.listchecknewsletter:checked')) {
                // at least one is checked
                } else {
                // none are checked
                alert("Seleziona una lista!");
                return false;
            }

        };
    }
    window.onload = function() {
        checkMe();
    }

});

有人可以建議我使用JavaScript代碼以使其正常工作嗎？

Answer 1

由於您尚未使用jQuery對其進行標記，因此這里是使用普通javascript的解決方案。

您可以將復選框的CSS類與querySelector一起使用

if (document.querySelector('.listchecknewsletter:checked')) {
   // at least one is checked
} else {
   // none are checked
}

Answer 2

使用jquery可以像這樣工作：

 $("#submit").on("click", function() { var checkboxes = $('.formlistbox input[type="checkbox"]'); if(checkboxes.filter(':checked').length < 1) { alert("please check at least 1 checkbox"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input name="list" value="1" type="hidden"> <input class="form-control" id="email" name="email" value="" placeholder="Email" required="required" type="email"> <div class="formphonebox"> <input class="form-control" id="prefix" name="prefix" value="0039" style="display:inline; width:25%;" type="text"> <input class="form-control" id="number" name="number" value="" placeholder="Cellulare" style="width:70%; float:right" type="text"> </div> <hr> <div class="formlistbox"> <span class="checkbox"> <input class="listchecknewsletter" value="26" id="group26" name="group" type="checkbox"> <label for="group26">group26</label> </span> <span class="checkbox"> <input class="listchecknewsletter" value="47" id="group47" name="group" type="checkbox"> <label for="group47">group47</label> </span> <span class="checkbox"> <input class="listchecknewsletter" value="41" id="group41" name="group" type="checkbox"> <label for="group41">group41</label> </span> <span class="checkbox"> <input class="listchecknewsletter" value="55" id="group55" name="group" type="checkbox"> <label for="group55">group55</label> </span> <span class="checkbox"> <input class="listchecknewsletter" value="30" id="group30" name="group" type="checkbox"> <label for="group30">group30</label> </span> <span class="checkbox"> <input class="listchecknewsletter" value="58" id="group58" name="group" type="checkbox"> <label for="group58">group58</label> </span> </div> <hr> <span class="checkbox"> <input id="privacycheck" type="checkbox" required="required"> <label for="privacycheck"><small><a href="#">Privacy Policy</a></small></label> </span> <div align="center"> <button type="submit" name="Submit" class="btn btn-danger" value="Iscrivimi" id="submit">Iscrivimi</button> </div> 

Answer 3

如果您（想要）使用jQuery：

if($('.listchecknewsletter:checked').length > 0) {
    // one or more are checked
}

此外，如果要發布所有復選框值，則必須將其名稱更改為group []，以使其為數組。