Check if at least one RADIO BUTTON has been checked

Question

I am creating a dynamic form, in it there can be X fields to fill, for example there can be 10 inputs Texts, 5 selects, 3 Radio etc

I created the whole structure to assemble this form in a dynamic way and it is working as expected.

But my biggest problem is when I will check if at least one RADIO BUTTON has been checked. If it were static the solution would be simpler, as it simply could take the ID of the main DIV and see if one is checked

<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>

They don’t need to pay too much attention to the details of the code, because I gave a summary, just to clarify that it is built dynamically

I needed to find some way to submit the form go through it all and check which are RADIOS from that individually go into each and check if at least one is checked, if you are not adding a message saying that the field is mandatory and I do this with the other RADIOS until I go through all.

Does anyone have any suggestions of what to do or any material I can give a read?

How does the HTML built with that for

<form action="X">
    <div>
        <p>Pergunta 1</p>
        <div id="1">
            <label for="">
                <input type="radio" name="1" value="1" id="1">
                <span>1</span>
            </label>
            <label for="">
                <input type="radio" name="1" value="2" id="1">
                <span>2</span>
            </label>
            <label for="">
                <input type="radio" name="1" value="3" id="1">
                <span>3</span>
            </label>
        </div>
    </div>
    <div>
     <p>Pergunta 2</p>
     <div id="2">
        <label for="">
            <input type="radio" name="2" value="1" id="2">
            <span>1</span>
        </label>
        <label for="">
            <input type="radio" name="2" value="2" id="2">
            <span>2</span>
        </label>
        <label for="">
            <input type="radio" name="2" value="3" id="2">
            <span>3</span>
        </label>
    </div>
 </div>
 <button type="submit">Enviar</button>
 </form>

Answer 1

You can use the jQuery with a selector that selects all radiochecked and check whether the length is greater than 0:

    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}`);
        }

      });

    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <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>

The length will be 0 no case radio checked is found.

Behold: selector :checked