Question

我有一个在检查时会展开的表单。当表单扩展时，有多个复选框 - 我需要确保此时至少选中一个复选框。我有以下html / js代码，当没有选中任何复选框时工作，但当我选择主复选框时，错误消失。当在展开的表单中选中任何复选框时，错误应该消失。

 $(document).ready(function () {
    $('#checkBtn').click(function() {
      checked = $("input[type=checkbox]:checked").length;

      if(!checked) {
        alert("You must check at least one checkbox.");
        return false;
      }

    });
  });

.inputs {
  display: none;
}

.foo:checked + .inputs {
  display: initial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<form action="foo">
  <input type="checkbox" class="foo"> Pre-designed contour:
  <div class="inputs"> 

    <input type="checkbox" name="contour" value="fiveSeven" id="fiveSeven"> 5x7
    <input type="checkbox"  required id="sixEight"> 6x8
    <input type="checkbox" required id="sixNine"> 6x9
  </div>   
</form>

<input type="button" value="Test Required" id="checkBtn">

Answer 1

您正在使用以下行检查代码中的任何已选中复选框：

checked = $("input[type=checkbox]:checked").length;

相反，您应该检查选中主复选框时显示的div中的复选框。

解决方案：

检查提交按钮单击时主要复选框的状态。如果已选中，则检查显示的div中所选复选框的数量。

为主复选框提供一个id属性值（例如mainCheckbox），并为显示的div中的所有复选框提供相同的类值（例如childCheckbox）。

点击按钮点击事件，检查主要复选框的状态。

if ($('#mainCheckbox')[0].checked) {
    //check for selected checkboxes in div
}

如果选中，请选中所选复选框

if ($('#mainCheckbox')[0].checked) {

    if(!$('.childCheckbox:checked').length) {

        alert("You must check at least one checkbox.");

        return false;
    }
}

JSfiddle for solution

Answer 2

您的jQuery正在检查任何input[type=checkbox]:checked，其中包含主#checkBtn复选框。为表单输入一个类并检查它们，或者在jQuery脚本中更改选择器以仅查找表单内的输入。

Answer 3

您可以检查选中的类型复选框的输入数量：

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

选中主复选框时，此值始终至少为1。

只需给你的其他复选框一个类，只选择它们或检查长度是否大于1。

顺便说一句，你不应该在if子句中加入一个int，花时间写下你真正想要的表达式。

Answer 4

您必须为主复选框添加更多条件和可选ID，我尝试使用此HTML标记：

<input type="checkbox" id="mainbox" class="foo">

和JS：

  $(document).ready(function() {
      var checkedValue;
      $('#checkBtn').click(function() {
          checked = $("input[type=checkbox]:checked").length;

          if (document.querySelector('#mainbox').checked == true) {
              if (checked == 1) {
                  alert("You must check at least one option.");
                  return false;
              }
          } else if (!checked) {
              alert("You must check at least one checkbox.");
              return false;
          }

      });
  });

我为你做了一个有效的JSFiddle示例：

https://jsfiddle.net/oggdg7dh/

展开表单时，请检查表单中的至少一个复选框

4 个答案: