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!
Se trovi questo articolo su un blog diverso da “blog.merlinox.com” si tratta probabilmente di una copia non autorizzata. L’indirizzo originale di questo articolo è: JS – DOM – RadioButton scritto da Merlinox.
