Pulsante di opzione jQuery set


134

Sto cercando di impostare un pulsante di opzione. Voglio impostarlo utilizzando il valore o l'id.

Questo è quello che ho provato.

$('input:radio[name=cols]'+" #"+newcol).attr('checked',true);

newcol è l'id del pulsante di opzione.

Forse è necessaria una piccola modifica.

Esistono due set di radio box uno con i col e l'altro con le file. Quindi vedo il punto nel non usare gli ID. Colpa mia. Quindi ho come esempio:

<input type="radio" name="rows" class="listOfCols" 
   style="width: 50%; " value="Site"></input>

e

<input type="radio" name="cols" class="listOfCols" 
   style="width: 50%; "  value="Site"></input>

con l'id rimosso, e devo impostare quello corretto.


Risposte:


196

Il tuo selettore cerca il discendente di un input:radio[name=cols]elemento che ha l'id di newcol(bene il valore di quella variabile).

Prova invece (poiché stai comunque selezionando per ID):

$('#' + newcol).prop('checked',true);

Ecco una demo: http://jsfiddle.net/jasper/n8CdM/1/

Inoltre, a partire da jQuery 1.6 il metodo per alterare una proprietà è .prop(): http://api.jquery.com/prop


5
+1 per propvs attr. attrdeprecato per le proprietà e non funziona più in jQuery 2.0))
gavenkoa

87

Ho trovato la risposta qui:
https://web.archive.org/web/20160421163524/http://vijayt.com/Post/Set-RadioButton-value-using-jQuery

Fondamentalmente, se si desidera controllare un pulsante di opzione, DEVE passare il valore come un array:

$('input:radio[name=cols]').val(['Site']);
$('input:radio[name=rows]').val(['Site']);

Ciao quel link non contiene contenuti suggeriti. Perché continuate a rifiutare la mia modifica per rimuovere il collegamento. Non contiene nulla riguardo alla questione.
Menuka Ishan,

@ MenukaIshan, il punto è: dare credito. Il link è disponibile in web.archive.org e il ragazzo che lo ha scritto per la prima volta e da cui ottengo l'idea della risposta deve ricevere il suo credito. Non rimuovere il link e se vuoi vedere il post originale, copia e incolla il link (non so perché andrà alla vecchia pagina invece di web.archive.org)
Chococroc

2
@Chococroc Non hai configurato correttamente il Markdown della domanda. Ho visto la versione dell'archivio Web e l'ho collegata correttamente. Dopo la revisione Si collegherà correttamente al sito.
Menuka Ishan,

2
Sembra che questa dovrebbe essere la risposta accettata poiché è la soluzione menzionata nei documenti jQuery
plong0

15

Nel selettore sembra che tu stia tentando di recuperare un elemento nidificato del tuo pulsante di opzione con un determinato ID. Se si desidera controllare un pulsante di opzione, è necessario selezionare questo pulsante di opzione nel selettore e non qualcos'altro:

$('input:radio[name="cols"]').attr('checked', 'checked');

Ciò presuppone che nel markup sia presente il seguente pulsante di opzione:

<input type="radio" name="cols" value="1" />

Se il tuo pulsante di opzione aveva un ID:

<input type="radio" name="cols" value="1" id="myradio" />

è possibile utilizzare direttamente un selettore ID:

$('#myradio').attr('checked', 'checked');

Se ci sono più radio con il colsnome $('input:radio[name="cols"]').attr('checked', 'checked');, selezionerà solo l'ultima. Eseguirà il codice su ciascuno, ma ogni volta che imposti la checkedproprietà, l'elemento precedentemente impostato viene disinserito. Ecco una demo: jsfiddle.net/jasper/n8CdM/2
Jasper

@ Jasper, sì, è vero. È per questo che ho suggerito di utilizzare un selettore ID.
Darin Dimitrov

12

Puoi provare il seguente codice:

$("input[name=cols][value=" + value + "]").attr('checked', 'checked');

Ciò imposterà l'attributo controllato per le colonne radio e il valore come specificato.


1
...the most important concept to remember about the checked attribute is that it does not correspond to the checked property.Fonte: api.jquery.com/attr
Jasper,

10

Perché avete bisogno 'input:radio[name=cols]'. Non conosci il tuo html, ma supponendo che gli ID siano unici, puoi semplicemente farlo.

$('#'+newcol).prop('checked', true);

6

Prova questo:

$("#" + newcol).attr("checked", "checked");

Ho avuto problemi con attr("checked", true), quindi tendo invece a usare quanto sopra.

Inoltre, se hai l'ID, non hai bisogno di altre cose per la selezione. Un ID è unico.


1
prop è meglio che attr per cose come questa
RozzA

attr è sparito in jQuery 1.9+ Usa prop.
Mike_Laird,

Hai ragione, ma alla fine dipende dalla tua situazione specifica. Se il tuo codice sarà sempre in esecuzione con jQuery 1.6+, prop è la strada da percorrere. Ma se il tuo codice potrebbe essere in esecuzione su versioni precedenti, la soluzione non è così semplice. Ad esempio, mantengo il plug-in jQuery PickList e supportiamo jQuery 1.4+, quindi utilizzare semplicemente prop non è un'opzione. Questo è un biglietto aperto, quindi se hai qualche suggerimento elegante mi piacerebbe ascoltarli; Non ho ancora avuto il tempo di fare le ricerche.
The Awnry Bear,

Il problema è che anche se la tua soluzione potrebbe essere più compatibile con le versioni precedenti, in questo caso semplicemente non funziona: Seleziona A, otterrà un nuovo checked="checked"attributo e il browser lo mostrerà come selezionato, quindi seleziona B e lo stesso accadrà. Ora quando selezioni di nuovo A avrà già un checked="checked"attributo e nulla cambierà. Come effetto collaterale di quella B sarà ancora selezionato, non A.
Kyborek,

2

Poiché newcolè l'ID del pulsante di opzione, puoi semplicemente usarlo come di seguito.

$("#"+newcol).attr('checked',true);

2

L'uso .filter()funziona anche ed è flessibile per ID, valore, nome:

$('input[name="cols"]').filter("[value='Site']").attr('checked', true);

(visto su questo blog )


1
Credo che sia una risposta altrettanto valida, ma dovrebbe usare il metodo prop (): $ ('input [name = "cols"]'). Filter ("[value = 'Site']"). Prop ('controllato ', vero);. L'utente desidera impostare per "valore o ID". A volte potresti non voler impostare i valori ID per ogni opzione radio, quindi è utile ottenere per nome e filtrare per valore.
Zac Imboden,

2

Combinazione di risposte precedenti:

$('input[name="cols"]').filter("[value='Site']").click();

0

Puoi semplicemente usare:

$("input[name='cols']").click();

0

La risposta scelta funziona in questo caso.

Ma la domanda riguardava la ricerca dell'elemento in base al radiogruppo e all'ID dinamico e la risposta può anche lasciare inalterato il pulsante di opzione visualizzato.

Questa riga seleziona esattamente ciò che è stato richiesto mentre mostra anche la modifica sullo schermo.

$('input:radio[name=cols][id='+ newcol +']').click();
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.