Au travers de ces différentes pages, nous essayerons de vous familiariser avec le Javascript.
Nous vous souhaitons une bonne lecture, mais surtout une bonne programmation :)
Chapitre 12.4 Les boutons radio
Les boutons radio sont utilisés pour noter un choix, et seulement un seul, parmi un ensemble de propositions.
| Propriété | Description |
| |
| name | indique le nom du contrôle. Tous les boutons portent le même nom. |
| index | l'index ou le rang du bouton radio en commençant par 0. |
| checked | indique l'état en cours de l'élément radio |
| defaultchecked | indique l'état du bouton sélectionné par défaut. |
| value | indique la valeur de l'élément radio. |
Prenons un exemple :
<HTML>
<HEAD>
<SCRIPT language="Javascript">
function choixprop(form3) {
if (form3.choix[0].checked) { alert("Vous avez choisi la
proposition " + form3.choix[0].value) };
if (form3.choix[1].checked) { alert("Vous avez choisi la
proposition " + form3.choix[1].value) };
if (form3.choix[2].checked) { alert("Vous avez choisi la
proposition " + form3.choix[2].value) };
}
</SCRIPT>
</HEAD>
<BODY>
Entrez votre choix :
<FORM NAME="form3">
<INPUT TYPE="radio" NAME="choix" VALUE="1">Choix numéro 1<BR>
<INPUT TYPE="radio" NAME="choix" VALUE="2">Choix numéro 2<BR>
<INPUT TYPE="radio" NAME="choix" VALUE="3">Choix numéro 3<BR>
<INPUT TYPE="button"NAME="but" VALUE="Quel et votre choix ?" onClick="choixprop(form3)">
</FORM>
</BODY>
</HTML>
PS: Ce programme a été écrit avec un souci didactique. On pourrait l'écrire avec des codes plus compacts.
Entrez votre choix :
Dans le formulaire nommé form3, on déclare trois boutons radio. Notez que l'on utilise le même nom pour les trois boutons. Vient ensuite un bouton qui déclenche la fonction choixprop().
Cette fonction teste quel bouton radio est coché. On accède aux boutons sous forme d'indice par rapport au nom des boutons radio soit choix[0], choix[1], choix[2]. On teste la propriété checked du bouton par if(form3.choix[x].checked). Dans l'affirmative, une boite d'alerte s'affiche. Ce message reprend la valeur attachée à chaque bouton par le chemin form3.choix[x].value.
