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

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包含已检查无线电的元素数相匹配，如下所示：

$("#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")

  }

});

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

Answer 2

这是 - 一如既往 - 使用标准的 vanilla 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>