In jQuery, come posso selezionare un elemento in base al suo attributo name?

Ho 3 pulsanti di opzione nella mia pagina Web, come di seguito:

<label for="theme-grey">
  <input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>
<label for="theme-pink">
  <input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>
<label for="theme-green">
  <input type="radio" id="theme-green" name="theme" value="green" />Green</label>

In jQuery, voglio ottenere il valore del pulsante di opzione selezionato quando si fa clic su uno di questi tre. In jQuery abbiamo selettori id (#) e class (.), Ma cosa succede se voglio trovare un pulsante di opzione con il suo nome, come di seguito?

$("<radiobutton name attribute>").click(function(){});

Per favore, dimmi come risolvere questo problema.

Questo dovrebbe farlo, tutto questo è nella documentazione , che ha un esempio molto simile a questo:

$("input[type='radio'][name='theme']").click(function() {
    var value = $(this).val();
});

Dovrei anche notare che hai più ID identici in quello snippet. Questo è HTML non valido. Utilizzare le classi per raggruppare un insieme di elementi, non ID, poiché dovrebbero essere univoci.

Per determinare quale pulsante di opzione è selezionato, provare questo:

$('input:radio[name=theme]').click(function() {
  var val = $('input:radio[name=theme]:checked').val();
});

L'evento verrà catturato per tutti i pulsanti di opzione nel gruppo e il valore del pulsante selezionato verrà posizionato in val.

Aggiornamento: dopo la pubblicazione ho deciso che la risposta di Paolo sopra è migliore, poiché utilizza un attraversamento DOM in meno. Lascio che questa risposta sia valida poiché mostra come ottenere l'elemento selezionato in modo compatibile con più browser.

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

un altro modo

$('input:radio[name=theme]').filter(":checked").val()

Questo funziona alla grande per me. Ad esempio hai due pulsanti di opzione con lo stesso "nome" e volevi solo ottenere il valore di quello selezionato. Puoi provare questo.

$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();

Il seguente codice viene utilizzato per ottenere il valore del pulsante di opzione selezionato per nome

jQuery("input:radio[name=theme]:checked").val();

Grazie Adnan

Ho trovato questa domanda mentre cercavo un errore dopo aver eseguito l'aggiornamento da 1.7.2 di jQuery a 1.8.2. Sto aggiungendo la mia risposta perché c'è stato un cambiamento in jQuery 1.8 e versioni successive che cambia il modo in cui a questa domanda viene data risposta ora.

Con jQuery 1.8 hanno deprecato gli pseudo-selettori come: radio,: checkbox,: text.

Per fare quanto sopra ora basta sostituire il :radiocon [type=radio].

Quindi la tua risposta ora diventa per tutte le versioni di jQuery 1.8 e successive:

$("input[type=radio][name=theme]").click(function() { 
    var value = $(this).val(); 
}); 

Puoi leggere la modifica sul readme 1.8 e il ticket specifico per questa modifica , nonché capire perché nella pagina: radio selector nella sezione Informazioni aggiuntive.

Per chiunque non voglia includere una libreria per fare qualcosa di veramente semplice:

document.querySelector('[name="theme"]:checked').value;

jsfiddle

Per una panoramica delle prestazioni delle risposte correnti, consultare qui

Se desideri conoscere il valore del pulsante di opzione selezionato predefinito prima di un evento clic, prova questo:

alert ($ ( "Ingresso: Radio: checked"). val ());

È possibile utilizzare la funzione filtro se nella pagina sono presenti più gruppi radio, come indicato di seguito

$('input[type=radio]').change(function(){
    var value = $(this).filter(':checked' ).val();
    alert(value);
});

Ecco l'url di violino

http://jsfiddle.net/h6ye7/67/

<input type="radio" name="ans3" value="help"> 
<input type="radio" name="ans3" value="help1">
<input type="radio" name="ans3" value="help2">

<input type="radio" name="ans2" value="test"> 
<input type="radio" name="ans2" value="test1">
<input type="radio" name="ans2" value="test2">

<script type="text/javascript">
  var ans3 = jq("input[name='ans3']:checked").val()
  var ans2 = jq("input[name='ans2']:checked").val()
</script>

Se si desidera un valore vero / falso, utilizzare questo:

  $("input:radio[name=theme]").is(":checked")

Qualcosa del genere forse?

$("input:radio[name=theme]").click(function() { 
 ...
}); 

Quando fai clic su un pulsante di opzione, credo che finirà per essere selezionato, quindi verrà chiamato per il pulsante di opzione selezionato.

Se hai più di un gruppo di pulsanti di opzione nella stessa pagina puoi anche provare questo per ottenere il valore del pulsante di opzione:

$("input:radio[type=radio]").click(function() {
    var value = $(this).val();
    alert(value);
});

Saluti!

può anche utilizzare una classe CSS per definire l'intervallo di pulsanti di opzione e quindi utilizzare quanto segue per determinare il valore

$('.radio_check:checked').val()

Questo ha funzionato per me ..

HTML:

<input type="radio" class="radioClass" name="radioName" value="1" />Test<br/>
<input type="radio" class="radioClass" name="radioName" value="2" />Practice<br/>
<input type="radio" class="radioClass" name="radioName" value="3" />Both<br/>

jquery:

    $ (". radioClass"). each (function () {
        if ($ (this) .IS ( ': checked'))
        alert ($ (this) .VAL ());
    });

Spero che sia d'aiuto..

$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});

Potresti notare che l'uso del selettore di classe per ottenere il valore dei ASP.NET RadioButtoncontrolli è sempre vuoto ed ecco il motivo.

Si crea il RadioButtoncontrollo ASP.NETcome di seguito:

<asp:RadioButton runat="server" ID="rbSingle" GroupName="Type" CssClass="radios" Text="Single" />
<asp:RadioButton runat="server" ID="rbDouble" GroupName="Type" CssClass="radios" Text="Double" />
<asp:RadioButton runat="server" ID="rbTriple" GroupName="Type" CssClass="radios" Text="Triple" />

E ASP.NETrende il seguente HTML per il tuoRadioButton

<span class="radios"><input id="Content_rbSingle" type="radio" name="ctl00$Content$Type" value="rbSingle" /><label for="Content_rbSingle">Single</label></span>
<span class="radios"><input id="Content_rbDouble" type="radio" name="ctl00$Content$Type" value="rbDouble" /><label for="Content_rbDouble">Double</label></span>
<span class="radios"><input id="Content_rbTriple" type="radio" name="ctl00$Content$Type" value="rbTriple" /><label for="Content_rbTriple">Triple</label></span>

Perché ASP.NETnon vogliamo usare RadioButtonil nome o l'id di controllo perché possono cambiare per qualsiasi motivo fuori dalla mano dell'utente (cambiare il nome del contenitore, il nome del modulo, il nome del controllo utente, ...) come puoi vedere nel codice sopra.

L'unico modo possibile per ottenere il valore RadioButtondell'utilizzo di jQuery è utilizzare la classe css come indicato in questa risposta a una domanda totalmente non correlata come segue

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});