Как проверить, что динамически генерируемый переключатель нажимается в форме?

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

Этого, как всегда, очень легко добиться, используя стандартный ванильный 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>

Answer 2

Если предположить, что есть несколько вопросов, как вы указали в комментариях под вопросом, то все, что вам нужно, чтобы проверить, что общее количество .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 вместо нажатия кнопки по причинам доступности.