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!

 

Loading Facebook Comments ...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *