检查是否至少有一个RADIO BUTTON已被选中

Question

我正在创建一个动态表单，可能有X字段填充，例如可能有10个输入文本，5个选择，3个无线电等

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

然而，我最大的问题是，当我将检查是否至少一个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>

你不需要太注意代码的细节，因为我给出了一个总结，只是为了解释它是动态构建的

我需要找到一种提交表单的方式来检查所有这些，并检查哪些是单独输入的radio，并检查是否至少有一个被选中，如果没有，添加一条消息说该字段是强制性的，我对其他radio这样做，直到通过所有。

有没有人有什么建议或者我可以阅读的材料?

Answer 1

您是否尝试使用required?我认为前面你不需要任何其他东西

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

Answer 2

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>