Déselection d'un bouton radio

Soyez le premier à donner votre avis sur cette source.

Snippet vu 10 783 fois - Téléchargée 30 fois

Contenu du snippet

Dans le cadre d'un formulaire, vous utilisez des boutons radio préselectionnés (probablement à cause d'un choix précédent), mais vous voulez permettre à l'utilisateur de ne sélectionner aucun bouton.

Il doit pouvoir déselectionner ce qui a déjà été choisit.

On obtient un bouton radio permettant de faire 0 OU 1 CHOIX (et non UN SEUL normalement)

Source / Exemple :


<head>
  <title> </title>
 </head>
 <body>
 
<script language="JavaScript">
 	var desact = false;
</script>

 
 <input type="radio" onmousedown="if (this.checked){desact=true;}" onmouseup="if(desact){window.setTimeout('document.getElementById(\'oui\').checked=false; desact=false;',10)}" checked="checked" id="oui"  name="choix" /> Oui

 <input type="radio" onmousedown="if (this.checked){desact=true;}" onmouseup="if(desact){window.setTimeout('document.getElementById(\'non\').checked=false; desact=false;',10)}" id="non"  name="choix" /> Non
 
 
 </body>
</html>

Conclusion :


L'utilisation du window.setTimeOut est probablement très maladroite, mais j'ai pas trouvé mieux... J'attends avec impatience vos remarques et eventuelles solutions plus propres.

A voir également

Ajouter un commentaire

Commentaires

Messages postés
3
Date d'inscription
samedi 15 mai 2004
Statut
Membre
Dernière intervention
29 juin 2007

Petite mise à jour :
****************************************************************

function allowUncheckForIE(e)
{
uncheckFunction = function(e){
e.srcElement.detachEvent('onclick', uncheckFunction);
e.srcElement.checked=false;
}
if(e.srcElement.checked)
e.srcElement.attachEvent('onclick', uncheckFunction);
}

function allowUncheckForFirefox(e) {
uncheckFunction = function(e){
e.target.removeEventListener("click", uncheckFunction, false);
e.target.checked=false;
}
if(e.target.checked)
e.target.addEventListener("click", uncheckFunction, false);
}


function attachEventsToRadios(container){
var radios=container.getElementsByTagName('input');
for (var i = 0; i < radios.length; i++) {
radio = radios[i];
type = radio.getAttribute('type');
if ( type == 'radio') {
if (typeof( window.addEventListener ) == "undefined"){
radio.attachEvent('onmousedown', allowUncheckForIE);
radio.attachEvent('ondblclick', function(e){e.srcElement.checked=!e.srcElement.checked;});
}else{
radio.addEventListener("mousedown", allowUncheckForFirefox, false);
}
}
}
}
Messages postés
3
Date d'inscription
samedi 15 mai 2004
Statut
Membre
Dernière intervention
29 juin 2007

Pour les besoin de mon dev en cour (en ASP.net), j'ai eu besoin d'enregistrer les évenements sur les radio de facon dynamique via JS. Je vous livre ma solution, ca peu servir...
********************************************************************************
function isIE(){
return (typeof( window.addEventListener ) == "undefined");
}
function ieDblclick(e){
e.srcElement.checked = !e.srcElement.checked
}
function allowUncheck(e)
{
var sender = isIE() ? e.srcElement : e.target;

if(sender.checked){
if (isIE()){
sender.attachEvent('onclick', uncheckRadio);
}else{
sender.addEventListener("click", uncheckRadio, false);
}
sender.blur();
}
if(isIE()){
sender.detachEvent('ondblclick', ieDblclick);
sender.attachEvent('ondblclick', ieDblclick);
}
}
function uncheckRadio(e){
var sender;

if (isIE()){
sender = e.srcElement;
sender.detachEvent('onclick', uncheckRadio);
}else{
sender = e.target;
sender.removeEventListener("click", uncheckRadio, false);
}
sender.checked=false;
sender.blur();
}
function attachEventsToRadios(container){
var radios=container.getElementsByTagName('input');
for (var i = 0; i < radios.length; i++) {
radio = radios[i];
type = radio.getAttribute('type');
if ( type == 'radio') {
if (isIE()){
radio.attachEvent('onmousedown', allowUncheck);
}else{
radio.addEventListener("mousedown", allowUncheck, false);
}
}
}
}
**************************************************************************

Pour que tous les radios d'une page deviennent "déselectionnables" il suffit d'appeler attachEventsToRadios(document);
Messages postés
3
Date d'inscription
samedi 15 mai 2004
Statut
Membre
Dernière intervention
29 juin 2007

shun7, ta solution ne fonctionne pas sous firefox. Je vous propose ceci :
***********************************************************

<html>
<head>
<script language="javascript">
function isIE(){
return (typeof( window.addEventListener ) == "undefined");
}
function ieDblclick(e){
e.srcElement.checked = !e.srcElement.checked
}
function allowUncheck(inputRadio)
{
if(inputRadio.checked){
if (isIE()){
inputRadio.attachEvent('onclick', uncheckRadio);
}else{
inputRadio.addEventListener("click", uncheckRadio, false);
}
inputRadio.blur();
}
if(isIE()){
inputRadio.detachEvent('ondblclick', ieDblclick);
inputRadio.attachEvent('ondblclick', ieDblclick);
}
}
function uncheckRadio(e){
var sender;

if (isIE()){
sender = e.srcElement;
sender.detachEvent('onclick', uncheckRadio);
}else{
sender = e.target;
sender.removeEventListener("click", uncheckRadio, false);
}
sender.checked=false;
sender.blur();
}
</script>
</head>

<form method="post" id="frmMain" name="frmMain">
</td>
</td>
</form>

</html>

**********************************************************

Cette solution fonctionne sous firefox et IE(6 et 7) et présente les deux avantages suivants :
-Pas de variable globale (perso, je préfère éviter quand c'est possible).
-Un seul évènement est défini en dur sur le radio.

Petite subtilité : Sous IE(6ou7), si on fait deux clics trop rapidement, l'évènement du deuxième click n'est pas déclenché car il considère que c'est un double clic. D'où l'utilisation de la méthode ieDblclick atachée à l'évènement ondblclick. Dans la méthode allowUncheck si il s'agit d'IE, je détache puis ratache cette méthode à l'évènement de facon à éviter que la méthode soit déclenchée plusieurs fois quand l'évènement se produit. Pas trés joli mais éfficasse...
Messages postés
1
Date d'inscription
jeudi 27 février 2003
Statut
Membre
Dernière intervention
24 mai 2007

J'ai trouvé une autre solution qui permet de se passer de la fonction window.setTimeout().
Par contre, j'ai du utiliser la fonction blur() (il y'a peut etre mieux) pour forcer la déselection du bouton radio.

************************************************
<html>
<head>
<script language="javascript">
var doAction = false;
function uncheckRadio(obj)
{
doAction = false;
if(obj.checked)
{
doAction = true;
obj.blur();
obj.checked = false;
}
}
</script>
</head>


<form method="post" id="frmMain" name="frmMain">
,
Bouton 1,
,
Bouton 2

</form>

</html>
************************************************
Messages postés
1
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
19 décembre 2005

Une autre solution :

***********************************************************************

<html>
<head>
<title>titre</title>
<script>
function annuler(nom,nombre){
for(i=0;i<nombre;i++){
eval("document.formulaire." + nom)[i].checked=false
}
}
</script>
</head>

<form name="formulaire" action="mapage.htm" method="post">
<!-- avec un bouton de formulaire -->

1

2

3



<!-- avec un image 1 -->

1

2

3
[# ]



</form>

</html>

***********************************************************************
Afficher les 9 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (Endymion222)