jquery - 如何检查是否使用 Jquery 检查动态生成的单选按钮？

Question

我们有一个带有 MCQ 类型问题的问卷，它使用 laravel 中的刀片动态生成。我想检查是否使用单选按钮回答了每个问题。如果用户留下其中一个问题，我不希望提交表单。

我已经编写了以下代码，但此代码的问题是当用户留下除最后一个问题之外的所有问题时，我的意思是当他只回答提交表单的最后一个问题时。请记住，即使有一个问题没有得到解答，我也不希望提交表单。

<form action="/result" method="POST" id="form1">
  @csrf

  @php
    $count=0
  @endphp

 @foreach ($questions[$sections->id] as $question)
  <div class="ans" align="center">
    <div class="opt">

      <div class="row1">
        <label class="label">{{ $question->question }}</label>
      </div>

    <div class="ans">

     @php
      $answer=$answers[$question->id]
     @endphp

     @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>
  </div>

@endforeach
</form>
<div style="overflow: auto;">
  <div style="height:50px;">
    <div id="submitText" class="alert alert-danger" style="display:none">
      <strong>Can't Submit!</strong> Please select all options first, then click on submit.
    </div>
   </div>
    <button id="sub"   class="btn-self-submit float-right">Submit</button>&nbsp;&nbsp;&nbsp;
</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")
    }
});

标签： jqueryhtmlbutton

Answer 1

表单中的button元素会被自动视为type="submit"默认，从而在点击时立即触发表单提交。为了防止这种情况并自己处理提交，请将按钮设置为type="button"：

$("#sub").click(function(ev) {
  var check = false;
  $("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 {
    console.log("Please select at least one answer in each question.");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
  Q1 <input type="radio" name="q1" value="A"> <input type="radio" name="q1" value="B"> <input type="radio" name="q1" value="C"><br> Q2 <input type="radio" name="q2" value="A"> <input type="radio" name="q2" value="B"> <input type="radio" name="q2" value="C"><br>  Q3 <input type="radio" name="q3" value="A"> <input type="radio" name="q3" value="B"> <input type="radio" name="q3" value="C"><br>
  <button id="sub" type="button">submit</button>
</form>