En jQuery, ¿cómo obtengo el valor de un botón de opción cuando todos tienen el mismo nombre?

108

Aquí está mi 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>

Aquí está JS:

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

¡Aquí está JSFIDDLE ! Cada vez que hago clic en el botón, vuelve 1. ¿Por qué? ¿Alguien puede ayudarme?

SPG
fuente

Respuestas:

226

En su código, jQuery solo busca la primera instancia de una entrada con nombre q12_3, que en este caso tiene un valor de 1. ¿Quieres una entrada con el nombre q12_3que sea :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>

Tenga en cuenta que el código anterior no es lo mismo que usar .is(":checked"). La is()función de jQuery devuelve un elemento booleano (verdadero o falso) y no (un) elemento (s).


Debido a que esta respuesta sigue recibiendo mucha atención, también incluiré un fragmento de JavaScript vainilla.

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

en su selector, también debe especificar que desea el botón de radio marcado:

$(function(){
    $("#submit").click(function(){      
        alert($('input[name=q12_3]:checked').val());
    });
 });
Dennis
fuente
1
Obtengo un valor 'indefinido'
Pavan Alapati
@PavanAlapati Realmente no podemos decirle por qué sin ver también su HTML; idealmente, publicaría una nueva pregunta con su fragmento HTML exacto y el código que está utilizando. Sin embargo, solo debería quedar indefinido si: El nombre en el selector no coincide con los nombres de los botones de radio; ninguno de los botones de radio está marcado; o el botón de radio marcado no tiene un valor asignado.
Dennis
7

Es posible que desee cambiar el selector:

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

fantactuka
fuente
7

También hay otra forma. Prueba el siguiente código

$(document).ready(function(){

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

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

Sí chico
fuente
0

usa este script

$('input[name=q12_3]').is(":checked");
Sohil Desai
fuente
4
La isfunción de jQuery devolverá un boolean, que en este caso sería inútil.
Dennis