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

Question

I am generating a form with multiple choice questions using php, Now I want to check if each and every question has been answered or not by checking if radio buttons for each question are clicked.

<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

Assuming that there are multiple questions, as you state in the comments under the question, then all you need to check the total number of .ans elements matches the number of .ans elements which contain a checked radio, like this:

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

As a side note I would suggest you do perform this check under the submit event of the form element, instead of the click of a button, for accessibility reasons.

Answer 2

This is - as always - very easy to achieve using standard vanilla Javascript. No jQuery necessary.

 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>