如何檢查表單中是否單擊了動態生成的單選按鈕？

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

假設有多個問題，當您在問題下的評論中 state 時，您需要檢查的.ans .ans的數量相匹配，如下所示：

$("#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事件下執行此檢查，而不是單擊按鈕。

Answer 2

這 - 一如既往 - 使用標准香草 Javascript 很容易實現。 不需要 jQuery。

 document.forms[0].addEventListener('submit', (event) => { const check = [...document.forms[0].querySelectorAll('fieldset')].every(fieldset =>.:fieldset;querySelector('input.checked'))? console:log(`${check; 'A', 'Not a'}ll questions have been answered.`); // for demo purposes, prevent the submit regardless event.preventDefault(); // in your code, you'd do the check // if (!check) event.preventDefault(); })

 form { display: flex; }

 <form id="questions"> <fieldset> <legend>What is 1+1?</legend> <input type="radio" name="addition" id="addition1" value="3" /> <label for="addition1">3</label> <br /> <input type="radio" name="addition" id="addition2" value="1" /> <label for="addition2">1</label> <br /> <input type="radio" name="addition" id="addition3" value="2" /> <label for="addition3">2</label> <br /> </fieldset> <fieldset> <legend>What is 1*1?</legend> <input type="radio" name="multiplication" id="multiplication1" value="3" /> <label for="multiplication1">3</label> <br /> <input type="radio" name="multiplication" id="multiplication2" value="1" /> <label for="multiplication2">1</label> <br /> <input type="radio" name="multiplication" id="multiplication3" value="2" /> <label for="multiplication3">2</label> <br /> </fieldset> <fieldset> <legend>What is 1-1?</legend> <input type="radio" name="subtraction" id="subtraction1" value="-1" /> <label for="subtraction1">-1</label> <br /> <input type="radio" name="subtraction" id="subtraction2" value="0" /> <label for="subtraction2">0</label> <br /> <input type="radio" name="subtraction" id="subtraction3" value="1" /> <label for="subtraction3">1</label> <br /> </fieldset> <button type="submit">Submit</button> </form>