Seleziona un pulsante di opzione utilizzando JavaScript o jQuery
- Seleziona il pulsante di opzione utilizzando JavaScript
- Controllare il pulsante di opzione utilizzando jQuery
- Controllare il pulsante di opzione in base a un clic del pulsante
Utilizziamo spesso script lato client come jQuery o JavaScript, per creare siti Web interattivi e veloci e possiamo completare operazioni semplici come la convalida dei moduli in modo efficiente senza alcun viaggio aggiuntivo al server web.
Dato uno scenario in cui si desidera selezionare un pulsante di opzione per impostazione predefinita o su un evento di clic del pulsante, è possibile utilizzare JavaScript o jQuery.
Cominciamo definendo una forma.
<div id='radiobuttonset'>
<input type='radio' id='myradio_1' name='radiobutton' value='1' />1
<input type='radio' id='myradio_2' name='radiobutton' value='2' />2
<input type='radio' id='myradio_3' name='radiobutton' value='3' />3
</div>
Seleziona il pulsante di opzione utilizzando JavaScript
Selezionare il pulsante di opzione utilizzando l’ID
Uno dei modi migliori per preselezionare un pulsante di opzione è fare riferimento ad esso tramite il suo ID. Per selezionare l’elemento DOM utilizzando ID, aggiungiamo il prefisso # all’ID e impostiamo il valore selezionato come true.
document.querySelector('#myradio_1').checked = true;
Uscita: il pulsante di opzione 1 è selezionato.
Selezionare il pulsante di opzione utilizzando il valore
Un’opzione alternativa consiste nell’usare il valore del pulsante di opzione per preselezionare il pulsante di opzione. La selezione per valore può essere utile negli scenari in cui non conosciamo l’ID di un pulsante di opzione ma conosciamo il valore.
Possiamo usare l’ID del div genitore e selezionare l’elemento il cui valore è 2. Quindi possiamo impostare l’attributo checked su true.
document.querySelector('#radiobuttonset > [value="2"]').checked = true;
Uscita: il pulsante di opzione 2 è selezionato.
In alcuni casi, dove sappiamo che non ci sono altri elementi nel DOM uguali al valore predefinito, possiamo selezionare l’elemento controllando semplicemente se il valore. In questo caso, non avremo bisogno dell’ID genitore.
document.querySelector('[value="3"]').checked = true;
Uscita: il pulsante di opzione 3 è selezionato.
Controllare il pulsante di opzione utilizzando jQuery
Oltre a utilizzare JavaScript, possiamo anche utilizzare la libreria jQuery per controllare un pulsante di opzione in base a un valore predefinito. jQuery è una libreria, costruita utilizzando JavaScript. Aiuta a semplificare l’attraversamento e la manipolazione del DOM HTML. La sintassi per jQuery è anche più semplice di JavaScript.
Per aggiungere usa jQuery aggiungi un riferimento alla libreria jQuery da CDN o da un file locale.
Selezionare il pulsante di opzione utilizzando l’ID
Come JavaScript, per accedere all’elemento DOM utilizzando ID, utilizziamo il prefisso #. Tuttavia, la sintassi esatta dipende dalla versione di jQuery utilizzata.
L’attuale versione stabile di jQuery è la 3.4.1.
La versione di jQuery è uguale o superiore (>=) 1.6
Se la versione di jQuery utilizzata è maggiore o uguale a 1.6, usiamo prop per impostare l’attributo verificato in modo che sia vero.
$('#myradio_1').prop('checked', true);
Uscita: il pulsante di opzione 1 è selezionato.
La versione di jQuery è versioni precedenti a (<) 1.6
Se la versione di jQuery è precedente alla 1.6, potremmo aggiornare l’attr come selezionato.
$('#myradio_2').attr('checked', 'checked');
Uscita: il pulsante di opzione 2 è selezionato
Selezionare il pulsante di opzione utilizzando il valore
Possiamo anche aggiornare il valore selezionato per il pulsante di opzione in base al valore del pulsante.
$('input[name=radiobutton][value=\'1\']').prop('checked', true);
Uscita: il pulsante di opzione 2 è selezionato
Controllare il pulsante di opzione in base a un clic del pulsante
Una volta che sappiamo come aggiornare il pulsante di opzione utilizzando JavaScript o jQuery, possiamo aggiornare la selezione in base a qualche evento come il clic di un pulsante o qualsiasi altro elemento selezionato. Per testarlo, aggiorniamo il nostro modulo per aggiungere un pulsante.
<div id='radiobuttonset'>
<input type='radio' id='myradio_1' name='radiobutton' value='1' />1
<input type='radio' id='myradio_2' name='radiobutton' value='2' />2
<input type='radio' id='myradio_3' name='radiobutton' value='3' />3
</div>
<button id="button_1">check 1</button>
Possiamo quindi aggiungere un evento clic sul pulsante. Al clic, seleziona il primo pulsante di opzione.
$('#button_1').click(function() {
$('input[name=radiobutton]').val(['1']);
});
Uscita: il pulsante di opzione 1 è selezionato