Count radio inputs that are :checked

Question

I have two inputs in each group with name equal, where each one has values different, whole and half

Using the if and else or otherwise, I would like to count the inputs that will be checked.

• When I speak of if and else i imagine it would be a way to " If the button is checked add++; Otherwise --subtract;

As my knowledge is very shallow, I would love comments on the logic of such a function.

https://jsfiddle.net/he0fch08/

I left it for you to see more or less the idea. I commented on the last else in javascript because this is already running too.

Example of the situation would be the following,

• Began the program
• Check the first input from grupo[0].
• See the result - Will appear 1 and 0.
• Selects the 2nd grupo[0] - There will be 0 and 1.
• When I choose again grupo[0], It was to be 1 and 0 again, but then the first mismatch happens - Appearing 1 and 1.
• And so on to add to the choices of other inputs.

Answer 1

If you only want to count how many inputs for half and integers are selected you can do it all at the expense of the selector.

For this you will need to include in your selector:

• [type=radio] to include only radio Buttons
• [value=inteiro] or [value=metade] to catch only those who have the value who interests you
• :checked to be selected only

Then it is only to know the quantity of elements obtained by consulting the length.

Example:

function resultado(){
  let metades = $("input[type=radio][value=metade]:checked").length;
  let inteiros = $("input[type=radio][value=inteiro]:checked").length;
  console.log("Inteiro(s) " + inteiros, "Metade(s) " + metades );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="nome[]" value="inteiro"/>inteiro[]
<input type="radio" name="nome[]" value="metade"/>metade[]
<p></p>
<input type="radio" name="nome[1]" value="inteiro"/>inteiro[1] 
<input type="radio" name="nome[1]" value="metade"/>metade[1]<p></p>
<input type="radio" name="nome[2]" value="inteiro"/>inteiro[2] 
<input type="radio" name="nome[2]" value="metade"/>metade[2]
<p><span onclick="resultado()">resultado - clique.</span></p>

Answer 2

I basically changed the dial to get the <input> for name and bring only checked.

Then I check the marked values and increment the variables inteiro and metade.

function resultado(){
  var opcoes  = [];
  var inteiro = 0;
  var metade  = 0;
  opcoes[0] =document.querySelector("input[name='nome[]']:checked");
  opcoes[1] =document.querySelector("input[name='nome[1]']:checked");
  opcoes[2] =document.querySelector("input[name='nome[2]']:checked");

  for(i=0;i<opcoes.length;i++){
    if(opcoes[i]){ //Verifico se uma opção foir marcada
      if(opcoes[i].value == 'inteiro')//se foi marcada verifico o valor
        inteiro++;
      else
        metade++
    }
  }
  
  console.log('A quantidade de "inteiro" marcados é:' + inteiro);
  console.log('A quantidade de "metade" marcados é:' + metade);
}

<table>
  <tr>
    <td>
      <input type="radio" name="nome[]" value="inteiro" id="i"/>
      <label for="i">inteiro[ ]</label>
    </td>
    <td>
      <input type="radio" name="nome[]" value="metade" id="m"/>
      <label for="m">metade[ ]</label>
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" name="nome[1]" value="inteiro" id="i1"/>
      <label for="i1">inteiro[1]</label>
    </td>
    <td>
      <input type="radio" name="nome[1]" value="metade" id="m1"/>
      <label for="m1">metade[1]</label>
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" name="nome[2]" value="inteiro" id="i2"/>
      <label for="i2">inteiro[2]</label>
    </td>
    <td>
      <input type="radio" name="nome[2]" value="metade" id="m2"/>
      <label for="m2">metade[2]</label>
    </td>
  </tr>
</table>

<div onclick="resultado()">
    Clique para visulizar a quantidade de opções 'inteiro' e a quantidade de opções 'metade' marcadas:
</div>