Checkbox: Améliorer le transfert avec les données de formulaire

La case à cocher peut avoir deux valeurs: vrai ou faux. Lorsque l'on passe les données de formulaire à une autre page, le nom et l'état de la checkbox sont passés quand elle est cochée, sinon, rien n'est passé.

Si la page qui reçoit les données connaît la liste des valeurs à passer, ceci est suffisant: lorsqu'on ne reçoit rien pour une case à cocher, on déduit qu'elle n'est pas cochée...

Si l'on veut quelque chose de plus sûr, il faut ajouter un peu de code JavaScript.

Utilisation basique d'une case à cocher

Comme tous les objets de formulaire, la checkbox dispose des propriétés value, name et id.

Elle a aussi un attribut sans valeur: checked. Celui-ci donne par défaut l'état coché à la case. Mais il peut aussi est utilisé pour connaître son état.

<input type="checkbox" name="cb" onchange="alert(this.checked)" />

L'évènement onchange est déclenché lorsque l'on coche ou décoche la case. Le code assigned affiche dans une boite de message, l'état: coché ou non.

Démonstration :

Avec JavaScript, on peut passer l'état false avec les données de formulaire

Sachant donc comment on peut lire l'état de la case, on veut transmettre cette donnée à une autre page. Pour ce faire on assigne la valeur de l'état, true ou false, à l'attribut value de la checkbox avec du code JavaScript associé à onchange.
On assigne aussi à value la valeur par défaut.

<input type="checkbox"  value="false" onchange="if(this.checked) this.value='true'; else this.value='false';" />

On ajoute un bouton à notre démonstration pour tester l'état de la case.

<input type="button" onclick="alert(document.form2.cb.value')" />

Le formulaire est désigné par form2 et cb est le nom de la checkbox.

Démonstration:

On peut utiliser une fonction d'usage général.

function chState(element)
{
    if(element.checked) 
        element.value='true'; 
   else
       element.value='false';
}

Ce qui simplifie le code de la checkbox:

<input type="checkbox"  value="false" onchange="chState(this)" />  

Ou un code encore plus simple:

<input type="checkbox"  value="false" onchange="this.value=this.checked" />   

Dès lors, l'état de la checkbox sera transmis avec les autres données de formulaire, que la case soit cochée ou non.

Voir aussi

© 2008-2014 Xul.fr