检查是否至少选中了一个 RADIO BUTTON

Question

我正在创建一个动态表单，可能需要填写 X 个字段，例如可能有 10 个输入文本、5 个选择、3 个 Radio 等。

我创建了整个结构来动态组装这个表单，它按预期工作。

但是，我最大的问题是何时检查是否至少检查了一个 RADIO BUTTON。如果采用静态方式，解决方案会更简单，因为它可以简单地获取主 DIV 的 ID 并查看是否选中了一个

<div id="$id">
 <?php for($i = $inicio; $i <= $fim; $i++){ ?>
   <label>
    <input  
     id="<?= $id ?>"    
     name="<?= $name ?>"
     value="<?= $i ?>" 
     type="radio"
   />
   <span><?= $i ?></span>
  </label>                                                 
<?php } ?>
</div>

代码的细节你不用太在意，因为我给了一个总结，只是为了说明它是动态构建的

我需要找到某种方法来提交表单以完成所有操作并检查哪些是 RADIOS，分别输入每个并检查是否至少检查了一个，如果没有添加一条消息，说明该字段是必填的，并且我对其他 RADIOS 执行此操作，直到通过所有 RADIOS。

是否有人对我可以阅读的内容或一些材料有什么建议？

Answer 1

function checarRespostas() {

  var perguntas = $('[id^=pergunta]');
  perguntas.each((index, pergunta) => {
    var respostasChecadas = $(pergunta).children('label').children('input[type=radio]:checked');

    if (respostasChecadas.length == 0) {
      alert(`Responda a ${pergunta.id}`);
    }

  });

}

<p>Pergunta 1</p>
<div id="pergunta_1">
    <label>
        <input type="radio" name="resposta_1" value="Opcao1"> Opção 1
        <br>
        <input type="radio" name="resposta_1" value="Opcao2"> Opção 2
    </label>
</div>

<p>Pergunta 2</p>
<div id="pergunta_2">
    <label>
        <input type="radio" name="resposta_2" value="Opcao1"> Opção 1
        <br>
        <input type="radio" name="resposta_2" value="Opcao2"> Opção 2
    </label>
</div>
<br>

<button onclick="checarRespostas()">Enviar</button>

Answer 2

您是否尝试过要求？ 我认为对于前面你不需要任何其他东西

<label>
    <input type="radio" name="gender" value="male" required>
    Male
</label><br>