Seleziona un pulsante di opzione utilizzando JavaScript o jQuery

Per selezionare un pulsante di opzione, imposta la sua proprietà checked su true. Con JavaScript puoi trovare l’input tramite id o value; jQuery consente di fare lo stesso con .prop('checked', true). I pulsanti di opzione di un gruppo condividono lo stesso name, quindi selezionando un input lo selezioni all’interno del gruppo.

Questo modulo fornisce gli ID, il nome del gruppo e i valori usati negli esempi seguenti:

<form id="preferences">
  <label><input type="radio" id="myradio_1" name="radiobutton" value="1"> Option 1</label>
  <label><input type="radio" id="myradio_2" name="radiobutton" value="2"> Option 2</label>
  <label><input type="radio" id="myradio_3" name="radiobutton" value="3"> Option 3</label>
</form>

Selezionare un pulsante di opzione con JavaScript

Se conosci l’ID, document.querySelector('#myradio_1').checked = true seleziona il primo input. # indica un selettore per ID e .checked rappresenta lo stato di selezione corrente.

Per selezionare un input in base al valore all’interno di questo modulo, usa document.querySelector('#preferences input[name="radiobutton"][value="2"]').checked = true. Limitare il selettore al modulo e al gruppo di pulsanti evita di trovare per errore un input non correlato presente altrove nella pagina. Un selettore del valore non limitato è adatto solo se quel valore è univoco tra gli input corrispondenti nel documento.

Il seguente esempio JavaScript autonomo rappresenta lo stato di selezione senza usare il DOM del browser. I selettori specifici per il browser riportati sopra usano invece l’API DOM effettiva.

Esegui questo esempio:

const radios = [
  { id: "myradio_1", value: "1", checked: false },
  { id: "myradio_2", value: "2", checked: false },
  { id: "myradio_3", value: "3", checked: false }
];

const chosenRadio = radios.find((radio) => radio.id === "myradio_1");
chosenRadio.checked = true;
console.log(radios.find((radio) => radio.checked).value);

1

Selezionare un pulsante di opzione con jQuery

Carica jQuery prima di eseguire queste chiamate. Per un input di cui conosci l’ID, usa $('#myradio_1').prop('checked', true). Per selezionare in base al valore, limita il selettore al modulo: $('#preferences input[name="radiobutton"][value="2"]').prop('checked', true). Il metodo .prop() imposta lo stato di selezione corrente; il valore di un vecchio attributo HTML non rappresenta in modo affidabile le successive modifiche dell’utente.

Selezionare un pulsante di opzione al clic di un pulsante

Aggiungi un pulsante e gestiscine il clic con JavaScript. Se il pulsante si trova fuori dal modulo, imposta type="button" per evitare che lo invii. Nell’esempio completo e invariato della pagina browser, facendo clic sul pulsante viene selezionata la prima opzione. Le etichette visibili “Option 1” e “Select Option 1” restano in inglese. Si tratta di codice sorgente statico e non viene dichiarato alcun risultato di esecuzione.

<form id="preferences">
  <label><input type="radio" id="myradio_1" name="radiobutton" value="1"> Option 1</label>
  <label><input type="radio" id="myradio_2" name="radiobutton" value="2"> Option 2</label>
  <label><input type="radio" id="myradio_3" name="radiobutton" value="3"> Option 3</label>
</form>
<button id="button_1" type="button">Select Option 1</button>
<script>
  document.querySelector('#button_1').addEventListener('click', () => {
    document.querySelector('#preferences input[value="1"]').checked = true;
  });
</script>