 |
 Cocher grâce à l'intitulé |
|
|
|
Connexion ratee
|
|
Sur une page web, pour cocher une case à cocher ou un bouton radio, on doit cliquer dessus. Normal. Pourtant dans une boîte de dialogue
Windows ou MacOS, on peut aussi simplement cliquer sur l'intitulé de la case ou du bouton (le texte qui figure à côté), c'est pratique.
Avec ce script, vous offrez cette possibilité à votre visiteur de le faire. Pratique ! |
|
|
|
|
|
Tout d'abord, on place un lien appelant une fonction JavaScript sur le texte de l'intitulé.
Cette fonction a besoin de 3 paramètres : le nom du formulaire, le nom de l'élément à cocher et pour les boutons radio, le numéro d'index du
bouton visé (dans le cas des cases à cocher, pour pouvoir utiliser la même fonction, on placera un 'X' à la place).
Tout d'abord, la fonction utilise une variable pour manipuler le champ visé en recomposant son chemin à partir des 2 premiers paramètres.
La fonction traite séparément les boutons radio et les cases à cocher (y-a-t'il un 'X' en troisième paramètre ?).
Pour les cases à cocher :
- La case est cochée : on la décoche en passant l'état de la case à 'false';
- La case n'est pas cochée : on la coche en passant l'état de la case à 'true'.
Pour les boutons radio :
- On complête la variable de manipulation du champ en lui ajoutant le numéro d'index passé en troisième paramètre,
- On coche le bouton en passant son état à 'true' (si un autre bouton du même groupe était coché, il se
décoche tout seul).
Notez que la syntaxe spécifiant l'état du bouton est différente pour Netscape 6.x des autres navigateurs. |
|
|
|
|
|
dans la partie <head>
 |
|
 |
|
<script language="JavaScript">
// Fonction pour cocher les checkbox et boutons radios AVEC ou SANS calque
function coche(formulaire,bouton,numero) {
// Création d'un raccourci pour manipuler le champ visé
var controle = eval("document." + formulaire + '.' + bouton);
// Si le champ est de type 'checkbox' (par convention on place un 'X' si on est sur une case à cocher)
if (numero == 'X') {
// Si la case est cochée
if (controle.status || controle.checked ) {
// Instruction pour Netscape 6.x
if (nc6) {
// On décoche la case
controle.checked = false;
}
// Instruction équivalente pour Netscape 4.x et Internet Explorer
else {
controle.status = false;
}
}
// Si la case n'est pas cochée
else {
if (nc6) {
controle.checked = true;
}
else {
controle.status = true;
}
}
}
// Si on ne trouve pas de 'X', c'est un bouton radio
else {
// Instruction pour Netscape 6.x
if (nc6) {
// On coche le bouton radio
controle[numero].checked = true;
}
// Instruction équivalente pour Netscape 4.x et Internet Explorer
else {
controle[numero].status = true;
}
}
}
</script>
|
|
|
 |
|
 |
dans la partie <body>
|
|
|
|
<form name="formulaire">
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td>Civilité :</td>
<!-- Sur chaque intitulé de lien, on appelle la fonction de 'cochage' en lui donnant comme paramètres les coordonnées du bouton visé -->
<td><input type="radio" name="civilite"> <a href="javascript:coche('formulaire','civilite',0);">M.</a> <input type="radio" name="civilite"> <a href="javascript:coche('formulaire','civilite',1);">Mme</a> <input type="radio" name="civilite"> <a href="javascript:coche('formulaire','civilite',2);">Mlle</a></td>
</tr>
<tr>
<td align="right"><input type="checkbox" name="avis"></td>
<!-- Sur l'intitulé de la case, on appelle la fonction de 'cochage' en lui donnant comme paramètres les coordonnées de la case sans oublier le 'X' car ce n'est pas un bouton radio -->
<td><a href="javascript:coche('formulaire','avis','X');">J'aime ce formulaire</a></td>
</tr>
</table>
</form>
|
|
|
|
|
|
|
|
|
|
|
|
|
