如何验证具有相同 css 类名的复选框

Question

我有一个包含几个问题的表格。其中一些问题是复选框输入。

生成表单问题时，它遵循以下结构：

1. 包含父 div

   <div class="checkbox">

2. 如果复选框是必填字段（用户必须为该问题至少选择一个复选框），父 div 会将 CSS 类“required”添加到现有类中。
3. 单击“保存更改”按钮时，它应该搜索所有 div，如下所示：

   <div class="checkbox required">

4. 如果该 div 包含至少一个被选中的复选框，它应该继续到下一个，依此类推，如果没有发现错误，最后提交表单。
5. 如果遇到没有选中任何复选框的

   <div class="checkbox required">

   ，它应该在该问题旁边打印一条错误消息。

下面是我的代码。这两个问题都是必填项。它相当接近，我似乎无法完全正确。它似乎将所有具有“必需”类的 div 视为一个对象，而不是在

boxes.each

部分中将每个 div 视为它们自己的单独对象。 有没有人有什么建议？提前谢谢你。

$(document).ready(function() {
    $("button").click(function(e){
        e.preventDefault();
        var boxes = $('div.checkbox.required');

        boxes.each(function(){
            if($(this).is(":checked"))
            {
                $(".error", this).hide();
                $("form").submit();
                return true;
            } else if($(this).not(":checked")) {
                $(".error", this).show().html("Please fill out all required fields");
                return false;
            }
        });
    });
    
});

label { font-weight: bold; }
.form-horizontal label span.error { color: red; }
.form-horizontal label div.error { color: red; }
.error {
    padding: 2px;
    font-size: 15px;
    background: #FFDFDF;
    border: 1px solid #FFCACA;
    border-radius: 5px;
    font-weight: normal;
    text-align: center;
    display: none;
}

<div class="checkbox required">
<h3>Question 1</H3>
  <div class="col-md-4">
    <span class="error"></span>
    <label id="8522[]">
      <input type="checkbox" class="" id="input-8522" name="8522[]" value="23606">
      Behavioral Follow-up
    </label><br>
    <label id="8522[]">
      <input type="checkbox" class="" id="input-8522" name="8522[]" value="23607">
      Medical Follow-up
    </label><br>
  </div>
</div>
<p><br></p>
<div class="checkbox required">
<h3>Question 2</H3>
  <div class="col-md-4">
    <span class="error"></span>
    <label id="8524[]">
      <input type="checkbox" class="" id="input-8524" name="8524[]" value="23608">
      Mild
    </label><br>
    <label id="8524[]">
      <input type="checkbox" class="" id="input-8524" name="8524[]" value="23609" checked="checked">
      Moderate
    </label><br>
    <label id="8524[]">
      <input type="checkbox" class="" id="input-8524" name="8524[]" value="23610">
      Severe
    </label><br>
  </div>
</div>

<p><br></p>

<button type="button" class="btn btn-primary action-save">
<i class="fa fa-save"></i> Save changes
</button>

<script src="https://code.jquery.com/jquery-3.6.3.slim.min.js"></script>

Answer 1

我看到了几个问题。

第一行是

if($(this).is(":checked"))

。此块中的

$(this)

指的是

div.checkbox.required

，因为我们正在遍历与此选择器匹配的元素列表。

<div>

元素不具有

:checked

属性，因此这将始终评估为

false

。相反，我们要确定

div.checkbox.required

是否包含任何

:checked

输入。我们可以这样做：

const hasAnyChecked = $(this).find('input:checked').length > 0;

下一个问题是

$("form").submit()

是 within

boxes.each

循环。这是行不通的，因为例如，如果第一个

div.checkbox.required

包含一个

:checked

输入因此有效，则将在检查其余

div.checkbox.required

元素以确定它们是否也有效之前提交表单。相反，我们必须使用一个变量来跟踪 all

div.checkbox.required

是否处于有效状态，然后在

boxes.each

循环完成后有条件地提交表单。

代码变为：

$(function() {
  $('button').on('click', function () {
    let isValid = true;

    $('div.checkbox.required').each(function () {
      const $this = $(this);
      const hasAnyChecked = $this.find('input:checked').length > 0;

      isValid = isValid && hasAnyChecked;

      if (hasAnyChecked) {
        $this.find('.error').hide();
      } else {
        $this.find('.error').text('Please fill out all required fields').show();
      }
    });

    if (isValid) {
      $("form").submit();
    }
  });
});

label {
  font-weight: bold;
}

.form-horizontal label span.error {
  color: red;
}

.form-horizontal label div.error {
  color: red;
}

.error {
  padding: 2px;
  font-size: 15px;
  background: #FFDFDF;
  border: 1px solid #FFCACA;
  border-radius: 5px;
  font-weight: normal;
  text-align: center;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox required">
  <h3>Question 1</H3>
  <div class="col-md-4">
    <span class="error"></span>
    <label id="8522[]">
      <input type="checkbox" class="" id="input-8522" name="8522[]" value="23606">
      Behavioral Follow-up
    </label><br>
    <label id="8522[]">
      <input type="checkbox" class="" id="input-8522" name="8522[]" value="23607">
      Medical Follow-up
    </label><br>
  </div>
</div>
<p><br></p>
<div class="checkbox required">
  <h3>Question 2</H3>
  <div class="col-md-4">
    <span class="error"></span>
    <label id="8524[]">
      <input type="checkbox" class="" id="input-8524" name="8524[]" value="23608">
      Mild
    </label><br>
    <label id="8524[]">
      <input type="checkbox" class="" id="input-8524" name="8524[]" value="23609" checked="checked">
      Moderate
    </label><br>
    <label id="8524[]">
      <input type="checkbox" class="" id="input-8524" name="8524[]" value="23610">
      Severe
    </label><br>
  </div>
</div>

<p><br></p>

<button type="button" class="btn btn-primary action-save">
  <i class="fa fa-save"></i> Save changes
</button>