JS – DOM – RadioButton

Comportamento molto simile al SELECT trattato prima è quello dei Radio Button, bottoni che raggruppati per medesimo nome, permettono di impostare una scelta vincolata: unica scelta su più opzioni.

Sotto un semplicissimo esempio che potrà spiegare in modo dettagliato come gestire tali oggetti da javascript.

Tutte le proprietà su W3schools (radioButton) e su quirksmode.org

Un esempio pratico.

<script language="javascript">
function check(){
//calcolo il numero di elementi nel select
n=document.frmTest.bottoneRadio.length;
mess = 0;
messTxt = "";
radioCheck = false;
radioValore = "";
for (i=0;i<n;i++){
//accedo all’array options delle opzioni e aggiungo il valore alla stringa "mess"
mess = mess + parseInt(document.frmTest.bottoneRadio[i].value);
if (document.frmTest.bottoneRadio[i].checked){
radioCheck = i;
radioValore = document.frmTest.bottoneRadio[i].value;
}
}
//alert con mess
alert("len: " + n + "\n" + "somma valori: " + mess + "\n" + "opzione checkata (parte da 0): " + radioCheck + "\n" + "valore checkato: " + radioValore);
return false;
}
</script>

<form name="frmTest" onsubmit="return check();">
<input name="bottoneRadio" type="radio" value="1" />
Scelta 1
<input name="bottoneRadio" type="radio" value="2" checked="checked" />
Scelta 2
<input name="bottoneRadio" type="radio" value="3" />
Scelta 3
<input name="bottoneRadio" type="radio" value="4" />
Scelta 4
<input type="submit" />
</form>

Attenzione!!!

In questo caso ho usato lo script con funzione (check): l’evento chiamante (onSubmit) avrà effetto sicuramente quando tutti gli oggetti HTML sono già stati caricati. Possiamo quindi mettere lo script prima dell’HTML.

Buon jsDivertimento!