0

Estou com dois inputs em cada grupo com name iguais, aonde cada um tem values diferentes, inteiro e metade

Usando o if e else ou outra maneira, gostaria de contar os inputs que estarão checked.

  • Quando falo do if e else eu imagino que seria um jeito de " Se o botão estiver checked adicione++; Caso contrário --subtraia;

Como meu conhecimento é bem raso, adoraria comentários sobre a lógica de uma função assim.

https://jsfiddle.net/he0fch08/

Deixei para vocês verem mais ou menos a ideia. Comentei o último else no javascript pois esse já está fugindo muito.

Exemplo da situação seria a seguinte,

  • Começou o programa
  • Dê check no 1º input do grupo[0].
  • Veja o resultado - Vai aparecer 1 e 0.
  • Seleciona o 2º grupo[0] - Vai aparecer 0 e 1.
  • Quando voltasse a escolher o grupo[0], era pra ficar 1 e 0 novamente, mas ai já acontece o primeiro desencontro - Aparecendo 1 e 1.
  • E assim, em diante ir somando com as escolhas dos demais inputs.
4
  • Cara não entendi o que você quer fazer. Commented 1/02/2018 às 12:01
  • 1
    O objetivo é contar quantos inputs de metade estão checked e quantos inputs de inteiro estão checked ?
    – Isac
    Commented 1/02/2018 às 12:14
  • Isso mesmo @Isac, eu estou arrumando a pergunta e o exemplo, eu estava muito cansado quando fiz ela, realmente ficou confuso!
    – Bender
    Commented 1/02/2018 às 12:15
  • @CaiqueRomero, vou arrumar ela, mas é o que o Isac comentou, realmente a pergunta que fiz está bem confusa.
    – Bender
    Commented 1/02/2018 às 12:17

2 Respostas 2

2

Se apenas pretende contar quantos inputs para metade e inteiros estão selecionados pode fazer tudo à custa do seletor.

Para isso irá necessitar de incluir no seu seletor:

  • [type=radio] para incluir apenas os radio buttons
  • [value=inteiro] ou [value=metade] para apanhar apenas os que tem o value que lhe interessa
  • :checked para serem so os selecionados

Depois é so saber a quantidade de elementos obtidos consultando o length.

Exemplo:

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>

3
  • 1
    Gostei da forma como usou os seletores em conjunto com o length, muito prático +1 Commented 1/02/2018 às 13:03
  • @isac, o motivo de declarar a variável com let tem algo em especial pra esse caso ? - Vi que let está relacionado com limitar a variável para um escopo de bloco.
    – Bender
    Commented 1/02/2018 às 13:14
  • 1
    @Yemoja Para este caso não faz diferença, foi mesmo força de habito. A ideia base é como disse limitar escopo, que acaba por apenas lhe trazer vantagens.
    – Isac
    Commented 1/02/2018 às 13:20
1

Basicamente mudei o seletor, para buscar os <input> por name e trazer somente os checkados.

Depois verifico os valores marcados e a incremento as variaveis inteiro e 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .