Le principe d'un bouton radio, c'est qu'une seule valeur peut être choisie parmi celle proposées dans une liste. Il n'est donc pas utile de chercher à décocher une valeur précédemment choisie lorsqu'une autre est sélectionnée. Par contre, dans certain cas, on peut avoir besoin de laisser l'utilisateur ré-initialiser son choix.

Je vous présente la solution que j'ai trouvé en comparaison aux méthodes courantes.

---

Pourquoi décocher un radio bouton ?

C'est vrai que l'idée paraît curieuse... En général ce genre d'options permet de limiter un utilisateur à un seul choix. Mais dans certains cas, L'utilisateur peut faire un choix et puis se rendre compte que cela ne lui convient pas. Comme dans notre exemple, un choix d'activité entre deux plages horaires qui se chevauchent (cf. image), peux amener le visiteur à se tromper.

Nous pourrions envisager de nommer les options des deux listes de choix de la même manière pour que la sélection se fasse sur une des quatre options. Mais des circonstances peuvent faire qu'il serait indispensable de séparer les deux listes, pour des raisons de statistique par exemple.

Les solutions courantes

Sur de nombreux formulaires, on a pour habitude de trouver ces deux solutions :

---

Personnellement, je n'apprécie pas ces techniques bien qu'elle soient simples à mettre en œuvre, mais je trouve qu'ergonomiquement, ce n'est pas ce qui se fait de plus clair ni de plus "propre" pour l'utilisateur.

Ma solution : le « décochage »

J'ai cherché une solution qui permettrait de décocher une option précédemment choisie. J'ai sans doute mal cherché mais quoiqu'il en soit, je n'ai rien trouvé de convaincant. J'ai donc élaboré mon propre script.

La difficulté réside dans le fait que lorsque l'on active un script lors d'un click sur un radio bouton (onclick), l'état du radio bouton est alors coché. Il est donc difficile d'effectuer un test sur l'état du radio bouton.
Je m'explique. Je crée un script qui test l'état de mon radio bouton et qui applique un traitement à celui-ci en fonction du résultat :

• Si le radio bouton est coché (égal à true) tu le décoches (égal à false)
• Si le radio bouton est décoché (égal à false) tu le coches (égal à true)

La méthode est simple. Mais à l'instant où je clique sur le radio bouton, son état est forcément à true. Le résultat renvoyé est donc toujours false et le radio bouton ne peut jamais être coché.

L'idée est donc de stocker le valeur choisie dans un élément caché et d'effectuer le test sur cette valeur. Voici ce que serait alors le script :

• Si le radio bouton choisi n'a pas la même valeur que la valeur de l'élément temporaire tu le coches et tu enregistres cette valeur dans l'élément temporaire
• Si le radio bouton choisi a la même valeur que la valeur de l'élément temporaire tu le décoches et tu effaces la valeur de l'élément temporaire

Voici le résultat :
Cocher une option puis re-clicker sur celle-ci pour la décocher.

9h00 - 11h00 Ateliers

Atelier 1
Atelier 2

9h30 - 12h00 Visites

Visite 1
Visite 2

Voici la fonction JavaScript : function uncheck(input, id) {
   if (document.getElementById) {
      var radio = document.getElementById(input+id);
      var temp = document.getElementById(input+'_temp');
   } else if (document.all) {
      var radio = document.all[input+id];
      var temp = document.all[input+'_temp'];
   } else {
      if ((navigator.appname.indexOf("Netscape") != -1) && parseInt(navigator.appversion == 4)) {
         var radio = document.layers[input+id];
         var temp = document.layers[input+'_temp'];
      }
   }
   if(radio.value == temp.value) {
      radio.checked = false;
      temp.value = '';
   } else {
      temp.value = radio.value;
   }
}


Et les éléments cachés à ajouter pour chaque groupe de radios bouton : < input type="hidden" id="atelier_temp" value="" / >
< input type="hidden" id="visite_temp" value="" / >
Attention !

• Cette méthode ne respecte pas les règles d'accessibilité puisqu'aucune alternative n'est disponible si le JavaScript de l'utilisateur est désactivé par son navigateur.
• Le script présenté ci-dessus est à rendre compatible avec les librairies et scripts déjà intégrés dans la page et à adapter en fonction du formulaire.

Si quelqu'un connait d'autres méthodes, elles sont les bienvenues