动态创建的复选框验证在jquery中无法正常工作

Question

我需要验证动态创建的复选框，对于每个问题，一些复选框回答，用户选择至少一个...只有第一个复选框答案适用于所有问题，如果选择第二个复选框，它显示未检查。用户可以选择任何选项。

$(function() {
  //function validate_form() {
  $("#continueButton").click(function() {
    $('input:checkbox').map(function() {
      //var rname = $(this).attr('name');
      var rname = $(this).attr('id');
      console.log(rname);
      var check_box = $('#' + rname),
        names1 = $.unique(check_box.map(function() {
          return this.name;
        })),
        checked = check_box.filter(function() {
          return this.checked;
        });
      alert(names1.length);
      alert(checked.length);
      //alert(check_box.is(':checked'));
      //alert(check_box.is(':checked'));
      if (names1.length != checked.length) {
        //alert('all answers are checked');
        isCheck = false;
        alert("select checkbox");
        //$('#e_'+rname).html("Please select the answer");
        return false;
      }
    });
    if (isCheck) {
      //return true;
      flagchk = 1
    } else {
      flagchk = 0;
      return false;
    }
    if (flagchk == 1) {
      //if(flagradio == 1 && flagchk==1){
      return true;
    } else {
      return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form name="sample" id="sample" method="post" action="sample.php">
  <label for="How was the breakfast?" id="label_error">How was the breakfast?</label>
  <br>
  <input type="checkbox" id="20" name="20_85" style="width: auto;display: inline-block;height: auto;" value="85" class="checkbox_check">&nbsp;Not good
  <input type="checkbox" id="20" name="20_84" style="width: auto;display: inline-block;height: auto;" value="84" class="checkbox_check">&nbsp;Good
  <span class="red_12">*</span>
  <br>
  <label for="How was the meal ?" id="label_error">How was the meal ?</label>
  <br>
  <input type="checkbox" id="28" name="28_92" style="width: auto;display: inline-block;height: auto;" value="92" class="checkbox_check">&nbsp;Good
  <input type="checkbox" id="28" name="28_93" style="width: auto;display: inline-block;height: auto;" value="93" class="checkbox_check">&nbsp;Average
  <input type="checkbox" id="28" name="28_94" style="width: auto;display:    inline-block;height: auto;" value="94" class="checkbox_check">&nbsp;Not good
  <div class="two-col buttonContainer">
    <a href="javascript:void(0);" id="continueButton" class="button">Book It Now</a>
  </div>
</form>

Answer 1

  

使用父div作为问题的上一组，以便更轻松地进行操作。

$(':checkbox')选择器将返回类型为checkbox

的所有元素

.filter可用于根据条件过滤掉元素。

试试这个：

$("#continueButton").click(function() {
  $('.form-elem').each(function() {
    var length = $(this).find(':checkbox').filter(function() {
      return this.checked;
    }).length;
    if (length == 0) {
      alert($(this).find('label').text() + ' :: not answered!');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form name="sample" id="sample" method="post" action="sample.php">
  <div class="form-elem">
    <label for="How was the breakfast?" id="label_error">How was the breakfast?</label>
    <br>
    <input type="checkbox" id="20" name="20_85" style="width: auto;display: inline-block;height: auto;" value="85" class="checkbox_check">&nbsp;Not good
    <input type="checkbox" id="20" name="20_84" style="width: auto;display: inline-block;height: auto;" value="84" class="checkbox_check">&nbsp;Good
    <span class="red_12">*</span>
  </div>
  <br>
  <div class="form-elem">
    <label for="How was the meal ?" id="label_error">How was the meal ?</label>
    <br>
    <input type="checkbox" id="28" name="28_92" style="width: auto;display: inline-block;height: auto;" value="92" class="checkbox_check">&nbsp;Good
    <input type="checkbox" id="28" name="28_93" style="width: auto;display: inline-block;height: auto;" value="93" class="checkbox_check">&nbsp;Average
    <input type="checkbox" id="28" name="28_94" style="width: auto;display:    inline-block;height: auto;" value="94" class="checkbox_check">&nbsp;Not good
  </div>
  <div class="two-col buttonContainer">
    <a href="javascript:void(0);" id="continueButton" class="button">Book It Now</a>
  </div>
</form>

Fiddle here