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 []，以使其成为数组。

提交表单时至少需要1个复选框

3 个答案: