No jQuery, como obtenho o valor de um botão de opção quando todos eles têm o mesmo nome?

108

Aqui está o meu código:

<table>
   <tr>
      <td>Sales Promotion</td>
      <td><input type="radio" name="q12_3" value="1">1</td>
      <td><input type="radio" name="q12_3" value="2">2</td>
      <td><input type="radio" name="q12_3" value="3">3</td>
      <td><input type="radio" name="q12_3" value="4">4</td>
      <td><input type="radio" name="q12_3" value="5">5</td>
   </tr>
</table>
<button id="submit">submit</button>

Aqui está JS:

$(function(){
    $("#submit").click(function(){      
        alert($('input[name=q12_3]').val());
    });
 });

Aqui está JSFIDDLE ! Cada vez que clico no botão, ele retorna 1. Por quê? Alguém pode me ajudar?

SPG
fonte

Respostas:

226

Em seu código, o jQuery apenas procura a primeira instância de uma entrada com nome q12_3, que neste caso tem um valor de 1. Você quer uma entrada com o nome q12_3que é :checked.

$("#submit").click(() => {
  const val = $('input[name=q12_3]:checked').val();
  alert(val);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td>Sales Promotion</td>
    <td><input type="radio" name="q12_3" value="1">1</td>
    <td><input type="radio" name="q12_3" value="2">2</td>
    <td><input type="radio" name="q12_3" value="3">3</td>
    <td><input type="radio" name="q12_3" value="4">4</td>
    <td><input type="radio" name="q12_3" value="5">5</td>
  </tr>
</table>
<button id="submit">submit</button>

Observe que o código acima não é o mesmo que usar .is(":checked"). A is()função jQuery retorna um booleano (verdadeiro ou falso) e não (um) elemento (s).


Como essa resposta continua recebendo muita atenção, também incluirei um snippet de JavaScript básico.

document.querySelector("#submit").addEventListener("click", () => {
  const val = document.querySelector("input[name=q12_3]:checked").value;
  alert(val);
});
<table>
  <tr>
    <td>Sales Promotion</td>
    <td><input type="radio" name="q12_3" value="1">1</td>
    <td><input type="radio" name="q12_3" value="2">2</td>
    <td><input type="radio" name="q12_3" value="3">3</td>
    <td><input type="radio" name="q12_3" value="4">4</td>
    <td><input type="radio" name="q12_3" value="5">5</td>
  </tr>
</table>
<button id="submit">submit</button>

Bram Vanroy
fonte
16

em seu seletor, você também deve especificar que deseja o botão de opção marcado:

$(function(){
    $("#submit").click(function(){      
        alert($('input[name=q12_3]:checked').val());
    });
 });
Dennis
fonte
1
Estou recebendo o valor 'indefinido'
Pavan Alapati 01 de
@PavanAlapati Não podemos realmente dizer o porquê sem ver seu HTML também; idealmente, você postaria uma nova pergunta com seu snippet de HTML exato e o código que está usando. No entanto, você só deve obter indefinido se: O nome no seletor não corresponder aos nomes dos botões de opção; nenhum dos botões de rádio é verificado; ou o botão de opção marcado não tem um valor atribuído.
Dennis
7

Você pode querer mudar o seletor:

$('input[name=q12_3]:checked').val()

fantactuka
fonte
7

Existe outra maneira também. Experimente o código abaixo

$(document).ready(function(){

      $("input[name='gender']").on("click", function() {
            alert($(this).val());
        });
});
Ankush Khandekar
fonte
2

$('input:radio[name=q12_3]:checked').val();

Sim garoto
fonte
0

use este script

$('input[name=q12_3]').is(":checked");
Sohil Desai
fonte
4
A isfunção do jQuery retornará um boolean, que neste caso seria inútil.
Dennis