In jQuery, come ottengo il valore di un pulsante di opzione quando hanno tutti lo stesso nome?


108

Ecco il mio codice:

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

Ecco JS:

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

Ecco JSFIDDLE ! Ogni volta che clicco sul pulsante, ritorna 1. Perché? Qualcuno può aiutarmi?

Risposte:


226

Nel tuo codice, jQuery cerca solo la prima istanza di un input con nome q12_3, che in questo caso ha un valore di 1. Vuoi un input con un nome q12_3che sia :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>

Nota che il codice sopra non è lo stesso dell'uso .is(":checked"). La is()funzione di jQuery restituisce un booleano (vero o falso) e non (un) elemento (i).


Poiché questa risposta continua a ricevere molta attenzione, includerò anche uno snippet JavaScript vanigliato.

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>


16

nel tuo selettore, dovresti anche specificare che vuoi che il radiobutton selezionato:

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

1
Ricevo un valore "indefinito"
Pavan Alapati

@PavanAlapati Non possiamo davvero dirti perché senza vedere anche il tuo HTML; idealmente, pubblicheresti una nuova domanda con lo snippet HTML esatto e il codice che stai utilizzando. Tuttavia, dovresti essere indefinito solo se: Il nome nel selettore non corrisponde ai nomi dei pulsanti radio; nessuno dei pulsanti radio è controllato; oppure il pulsante di opzione selezionato non ha un valore assegnato.
Dennis

7

Potresti voler cambiare selettore:

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


7

C'è anche un altro modo. Prova sotto il codice

$(document).ready(function(){

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



0

usa questo script

$('input[name=q12_3]').is(":checked");

4
La isfunzione di jQuery restituirà a boolean, che in questo caso sarebbe inutile.
Dennis
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.