18041 sujets

Questions générales et questions de débutants

Déselectionner un bouton radio en cliquant dessus

Pages :
Bonjour à tous!
J'aimerais savoir si il est possible de désélectionner un bouton radio une fois que l'attribut checked à une valeur checked en cliquant sur le même bouton? Tous les boutons seraient à nouveau vides.
Merci d'avance pour vos réponses
a écrit :
Ben ca serait le même principe de déselection mais en bouton radio c-a-d un choix possible.


C'est le rôle d'une checkbox. Smiley ravi Pourquoi détourner le rôle d'un radio ? Smiley decu
Merci pour ta réponse Smiley smile
Alors si tu preferes, je cherche un type de check box où un seul choix est possible et lorsque tu en choisi une l'autre s'efface.
Je ne sais pas si tu comprend ce que je cherche en fait.. Smiley smile
a écrit :
Alors si tu preferes, je cherche un type de check box où un seul choix est possible et lorsque tu en choisi une l'autre s'efface.


Ok dans ce cas il s'agit bien de radio buttons à utiliser. Smiley cligne
Voici un exemple (un seul choix possible du fait de la valeur de l'attribut name) :


<input type="radio" id="choix1" name="choix" /> <label for="choix1">Choix 1</label>
<input type="radio" id="choix2" name="choix" /> <label for="choix2">Choix 2</label>


Bonne continuation.
Romain
Smiley lol T'as toujours pas compris!!
Je sais utiliser le bouton radio, mais ce que je cherche, c'est une facon de cliquer sur un bouton qui est déjà sélectionné pour l'effacer ce qui fait qu'au final, aucun bouton n'est sélectionné! Smiley cligne
Merci Smiley ohwell
Bonjour,

Je ne suis pas un expert, éventuellement pas super bien réveillé, mais un bouton "reset" ne peut pas servir dans ce cas de figure ?
<form>
<p><input type="radio" id="choix1" name="choix" /> <label for="choix1">Choix 1</label></p>
<p><input type="radio" id="choix2" name="choix" /> <label for="choix2">Choix 2</label></p>
<p><input type="reset" value="Reset"/></p>
</form>


Mais je dis "peut-être" une bétise, et les spécialistes voudront bien m'en excuser Smiley confused
Je retourne dormir Smiley cligne
Bonne journée,
Cdt,
Sylvain
Solution scabreuse : utiliser du JS... Smiley biggol Smiley biggol Smiley biggol

Je pense que la solution de 6l20 est pas mal si tu n'as que des boutons radios dans ton form... dans le cas contraire la meilleure solution est surement d'ajouter un bouton radio avec comme label "Aucun choix" ou encore d'utiliser une combobox avec une option vide...

Edit : @Yodaswii > Je te rassure je n'avais pas compris la demande avant de lire le post de 6l20
Modifié par skywalk3r (28 May 2008 - 10:41)
Salut batssa Smiley cligne ,

le problème pour faire ce que tu demandes c'est qu'à priori le seul évènement qu'on peut intercepter est le onclick mais qu'à ce moment-là dans le script le bouton est déjà coché (qu'il l'ait déjà été avant ou non). Peut-être existe-t-il un moyen de faire que je ne connais pas Smiley rolleyes !

Quoi qu'il en soit je ne vois que cette solution qui utilise un input hidden pour sauvegarder le dernier bouton cliqué :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>test radio</title>
<script type="text/javascript">
function addEventOnClick () 
{
	// addEventListener sur le onclick 
	var btns_radio = document.getElementsByName("choix");
	for (btn = 0; btn < btns_radio.length; btn++) {
		addEvent(btns_radio[ btn ], 'click', TestChecked, false);
	}
}
	
//fonction addEvent
function addEvent(oElem, sEvType, fn, bCapture)
{
   return oElem.addEventListener?
      oElem.addEventListener(sEvType, fn, bCapture):
      oElem.attachEvent?
         oElem.attachEvent('on' + sEvType, fn):
         oElem['on' + sEvType] = fn;
}
	
//fonction onclick sur un bouton radio
function TestChecked(event)
{
	// On récupère l'id du bouton cliqué
	btn_checked = event.target || window.event.srcElement;
	var id_btn = btn_checked.id;
	
	// Si c'est le même que le dernier cliqué, on le désélectionne
	if (id_btn == document.getElementById("last_btn_checked").value) {
		document.getElementById(id_btn).checked = false;
		document.getElementById("last_btn_checked").value = "none";
	} else {
		document.getElementById("last_btn_checked").value = id_btn;
	}
}

window.onload = addEventOnClick;
</script>
</head>
<body>
<form id="monform" method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>">
	<p>
	<input type="radio" id="choix1" name="choix" /> <label for="choix1">Choix 1</label>
	<input type="radio" id="choix2" name="choix" /> <label for="choix2">Choix 2</label>
	<input type="radio" id="choix3" name="choix" /> <label for="choix3">Choix 3</label>
	<input type="radio" id="choix4" name="choix" /> <label for="choix4">Choix 4</label>
	<input type="hidden" name="last_btn_checked" id="last_btn_checked" value="none" />
	<input type="submit" />
	</p>
</form>
</body>
</html>

Mais au fait : ça sert à quoi Smiley lol ?

A+


Edit: : @skywalk3r > c'est vrai que c'est bizarre mais pourquoi faire simple... Smiley biggol
Modifié par Heyoan (28 May 2008 - 11:12)
Bonjour,

Et sinon, une solution rédactionnelle peut-être?
<h2>Are you...</h2>
<p>
	<input type="radio" name="choice" id="choice1" value="1">
	<label for="choice1">mad?</label><br />
	<input type="radio" name="choice" id="choice2" value="2">
	<label for="choice2">relaxed?</label><br />
	<input type="radio" name="choice" id="choice3" value="3">
	<label for="choice3">comfy?</label><br />
	<input type="radio" name="choice" id="choice0" value="0">
	<label for="choice0">none of the above?</label>
</p>

Le dernier choix correspond à «aucun choix». Dans un sondage, c'est le fameux «sans opinion».

Si les navigateurs ne permettent pas d'annuler la sélection d'un bouton radio, c'est que dans la quasi-totalité des formulaires il est prévu qu'un choix doive être fait. On pourrait imaginer que les navigateurs permettent d'annuler la sélection en cliquant sur le bouton radio sélectionné, mais cette solution serait loin d'être explicite ou évidente, donc pas terrible pour l'ergonomie du formulaire.

La solution est donc rédactionnelle et ergonomique, pas technique. Comme souvent avec les formulaires, lorsqu'on cherche à faire quelque chose de non standard c'est que l'on a négligé une solution simple (et souvent: moins glamour, mais plus efficace).
Florent V. a écrit :
Bonjour,

Et sinon, une solution rédactionnelle peut-être?
<h2>Are you...</h2>
<p>
	<input type="radio" name="choice" id="choice1" value="1">
	<label for="choice1">mad?</label><br />
	<input type="radio" name="choice" id="choice2" value="2">
	<label for="choice2">relaxed?</label><br />
	<input type="radio" name="choice" id="choice3" value="3">
	<label for="choice3">comfy?</label><br />
	<input type="radio" name="choice" id="choice0" value="0">
	<label for="choice0">none of the above?</label>
</p>

Le dernier choix correspond à «aucun choix». Dans un sondage, c'est le fameux «sans opinion».

Si les navigateurs ne permettent pas d'annuler la sélection d'un bouton radio, c'est que dans la quasi-totalité des formulaires il est prévu qu'un choix doive être fait. On pourrait imaginer que les navigateurs permettent d'annuler la sélection en cliquant sur le bouton radio sélectionné, mais cette solution serait loin d'être explicite ou évidente, donc pas terrible pour l'ergonomie du formulaire.

La solution est donc rédactionnelle et ergonomique, pas technique. Comme souvent avec les formulaires, lorsqu'on cherche à faire quelque chose de non standard c'est que l'on a négligé une solution simple (et souvent: moins glamour, mais plus efficace).

Clair, net, précis.
Merci M'sieur Smiley jap
@Florent V. (ou les autres) : L'utilisation d'une combobox est-elle appropriée ici avec une option "pas de choix"?
skywalk3r a écrit :
@Florent V. (ou les autres) : L'utilisation d'une combobox est-elle appropriée ici avec une option "pas de choix"?
Ben amha non vu qu'un seul choix est possible et exclut les autres, ce qui correspond bien au bouton radio Smiley murf ...

Mais on pourrait utiliser les combobox et rajouter une petite touche de JS pour dé-sélectionner les cases déjà cochées Smiley biggol Smiley lol !


Edit: Oups ! Je viens de me relire et je vois que j'ai confondu combobox et checkbox Smiley rolleyes ! Et du coup je dirais plutôt : Yes ! Why not !
Modifié par Heyoan (28 May 2008 - 12:12)
Oula merci ya plein de réponses! Smiley smile
A la question
a écrit :
Mais au fait : ça sert à quoi lol ?

J'ai une liste de produits qu'un commercial doit présenter à une certaine personne. Cette personne va attribuer une note de 0 à 3 (les 4 boutons radio pour chaque produit). Si une note a été attribuée ca veut dire que le produit a été présenté, sinon pas. Donc au cas ou le commercial se plante de ligne et coche un bouton pour un produit non présenté, je voudrais qu'il puisse revenir en arrière en cochant le meme bouton pour annuler.
a écrit :

le problème pour faire ce que tu demandes c'est qu'à priori le seul évènement qu'on peut intercepter est le onclick mais qu'à ce moment-là dans le script le bouton est déjà coché (qu'il l'ait déjà été avant ou non). Peut-être existe-t-il un moyen de faire que je ne connais pas rolleyes !

C'est exactement ca le problème Smiley biggrin
Je vais essayer ta solution javascript!

Sinon au niveau du bouton reset, c'est pas trop possible dans mon cas sinon ca efface tout et en plus c'est un programme pour telephone donc j'aimerai conserver de l'espace, voila voila

Enfin, pour la solution de florent, c'est celle que j'utilise déja en attendant de faire ce que je n'arriverai pas a faire..
En tout cas merci a tous pour vos réponses Smiley ravi
a écrit :

@Florent V. (ou les autres) : L'utilisation d'une combobox est-elle appropriée ici avec une option "pas de choix"?

Question intéressante à soulver. Voici mon avis : Pour moi, une série de boutons radio ou une liste déroulante à sélection unique remplissent exactement la même fonction : permettre à l'utilisateur de choisir une option parmi plusieurs prédéfinies. Aussi, il me paraît que les deux sont toujours interchangeables dans tous les cas de figure, qu'il s'agisse de formulaire web, de boîte de dialogue, ou d'interface utilisateur en général, d'ailleurs.
Le critère déterminant qui me fera pencher plutôt pour l'un que pour l'autre est le nombre d'options disponibles. Il ne viendrait probablement à l'idée de personne d'utiliser des boutons radio au-delà de 6 ou 7 possibilités (ça commence à prendre de la place), donc on se tournerait plutôt du côté des combo. De même il faut avouer que quand on n'a que 2, 3 ou 4 options, les boutons radio sont plus sympas parce qu'on a une vue d'ensemble des options disponibles car ils sont tous affichés. Dans le cas de la liste, il faut d'abord la dérouler.
La difficulté c'est de savoir si le click va opérer avant ou après le script de décochage du bouton !

D'où une solution consistant à repérer le bouton coché dans une variable globale et à laisser agir le navigateur en décochant le bouton après un certain délai grâce à un setTimeout.

Pour faire court avec des onclick="btn(this)" sur chaque bouton identifié par un attribut id le script pourrait être :
var btnCkd='';
function btn(t){
	if (t.id==btnCkd) {setTimeout("nbt()",7);return false;}
	btnCkd=t.id;return true;
}
function nbt(){
	document.getElementById(btnCkd).checked=false;
	btnCkd='';
}

Modifié par Julien de Prabere (28 May 2008 - 15:23)
QuentinC a écrit :

Question intéressante à soulver. Voici mon avis : Pour moi, une série de boutons radio ou une liste déroulante à sélection unique remplissent exactement la même fonction : permettre à l'utilisateur de choisir une option parmi plusieurs prédéfinies. Aussi, il me paraît que les deux sont toujours interchangeables dans tous les cas de figure, qu'il s'agisse de formulaire web, de boîte de dialogue, ou d'interface utilisateur en général, d'ailleurs.
Le critère déterminant qui me fera pencher plutôt pour l'un que pour l'autre est le nombre d'options disponibles. Il ne viendrait probablement à l'idée de personne d'utiliser des boutons radio au-delà de 6 ou 7 possibilités (ça commence à prendre de la place), donc on se tournerait plutôt du côté des combo. De même il faut avouer que quand on n'a que 2, 3 ou 4 options, les boutons radio sont plus sympas parce qu'on a une vue d'ensemble des options disponibles car ils sont tous affichés. Dans le cas de la liste, il faut d'abord la dérouler.

Reflexion intéressante, j'ai tendance à faire comme cela aussi, en ajoutant que l'avantage des boutons radio est aussi qu'on n'a pas forcément que du texte en guise de choix (qui sait, une image, une image et du texte...) et le texte ne tient pas forcément sur une ligne ou dans une combobox de largeur raisonnable...
Modifié par skywalk3r (28 May 2008 - 15:22)
Pages :
Sujet clos
Aller à