javascript - 如何检查表单中是否单击了动态生成的单选按钮？

Question

我正在使用 php 生成一个包含多项选择问题的表单，现在我想通过检查是否单击每个问题的单选按钮来检查每个问题是否已得到解答。

<div class="opt">
    <div class="row1">                                                 
      <label class="label">{{ $question->question }}</label>
    </div>
<div class="ans">                                                            
  $answer=$answers[$question->id]
  @foreach ($answer as $answer)
     <label class="btn btn-default no-margin-rule" >
        <input type="radio" name="{{$count+1}}" value="{{$answer->id}}" id="ans{{$answer->answer}}" />
        <span class="option{{$answer->answer+1}}"></span>
      </label>
    @endforeach
  </div>
 </div>

$("#sub").click(function() {
  var check = true;
  $("input:radio").each(function() {
    var name = $(this).attr('name');
    if ($("input:radio[name=" + name + "]:checked").length) {
      check = true;
    } else {
      check = false;
    }
  });

  if (check) {
    $("#form1").submit();
  } else {
    swal("Oops!", "Please select at least one answer in each question.", "error")
  }
});

Answer 1

假设有多个问题，正如您在问题下的注释中所述，那么您只需检查 .ans 元素的总数与 .ans< 的数量是否匹配 包含选中 radio 的元素，如下所示:

$("#sub").click(function() {
  var $answers = $('.ans');
  var valid = $answers.length == $answers.filter(':has(:radio:checked)').length;

  if (valid ) {
    $("#form1").submit();
  } else {
    swal("Oops!", "Please select at least one answer in each question.", "error")
  }
});

作为旁注，出于可访问性的原因，我建议您在 form 元素的 submit 事件下执行此检查，而不是单击按钮。