begin process at 2010 02 09 19:11:30
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Formulaire

 > DÉSELECTION D'UN BOUTON RADIO

DÉSELECTION D'UN BOUTON RADIO


 Information sur la source

Note :
10 / 10 - par 2 personnes
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Niveau :Débutant Date de création :03/05/2005 Date de mise à jour :03/05/2005 14:39:57 Vu :7 966
Auteur : Endymion222

Ecrire un message privé
Commentaire sur cette source (9)
Ajouter un commentaire et/ou une note

 Description

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

  • <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>
 <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.


 Historique

03 mai 2005 14:39:57 :

 Sources du même auteur

SAISIE ET AFFICHAGE D'UNE COULEUR
Toutes les sources de Endymion222

 Sources de la même categorie

Source avec Zip Source avec une capture CALCULS RAYNAUX V2 par Ali Bibi
Source avec Zip Source avec une capture VALIDATION D'UN FORMULAIRE par grarestephane
Source avec Zip Source avec une capture CHAT VIRTUEL par grarestephane
Source avec Zip Source avec une capture AJOUTER ET SUPPRIMER DES FICHIERS DANS UNE LISTE par grarestephane
Source avec Zip TEXTAREA : LIMITER LA LARGEUR ET LA HAUTEUR DU TEXTE SAISIE par vilfarfadet
Toutes les sources de la catégorie Formulaire

Commentaires et avis

Commentaire de vince1415 le 03/05/2005 11:31:53

Salut,
Merci pour ce bout de code, je cherchai justement comment j'aller faire pour deselectionner mes boutons radio des que mon champs de texte aurait le focus. Etant debutant en javascript, a ma bien servi.
Merci

Commentaire de algori le 03/05/2005 12:16:44

Salut,
Chez moi, une erreur (logique) se produit : desact est indéfini.
@++

Commentaire de Endymion222 le 03/05/2005 14:38:21

Exact, j'avais definit desact dans un

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

Situé en debut de code... Je le rajoute illico

Commentaire de algori le 03/05/2005 14:55:41

OK ! Ca marche impec maintenant.
@++

Commentaire de etjo6370 le 19/12/2005 17:38:19

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>
<body>
<form name="formulaire" action="mapage.htm" method="post">
   <!-- avec un bouton de formulaire -->
    <input type="radio" name="essai" value="1">
    1
    <input type="radio" name="essai" value="2">
    2
    <input type="radio" name="essai" value="3">
    3
    <input type="button" value="annuler" onclick="annuler('essai','3')">
    <br>
    <!-- avec un image 1 -->
    <input type="radio" name="essai2" value="1">
    1
    <input type="radio" name="essai2" value="2">
    2
    <input type="radio" name="essai2" value="3">
    3
    <a href="#" onclick="annuler('essai2','3')"><img src="images/no.gif" width="18" height="18" border="0"></a><br>
<br>
</form>
</body>
</html>

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

Commentaire de shun7 le 24/05/2007 17:53:58

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>

<body>
<form method="post" id="frmMain" name="frmMain">
<table id='Tab'>
<tr>
<td>
<INPUT onmouseup='uncheckRadio(this);' onblur='if(doAction){this.checked = false;doAction = false;}' TYPE='radio' NAME='Btn'ID='Btn1'></td>
<td>Bouton 1
</td>
<td>
<INPUT onmouseup='uncheckRadio(this);' onblur='if(doAction){this.checked = false;doAction = false;}' TYPE='radio' NAME='Btn'ID='Btn2'></td>
<td>Bouton 2
</td>
</tr>
</table>
</form>
</body>
</html>
************************************************

Commentaire de monstroplante le 29/06/2007 13:56:14

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>
<body>
<form method="post" id="frmMain" name="frmMain">
<INPUT onmousedown='allowUncheck(this);' TYPE='radio' NAME='Btn'ID='Btn1'></td>
<INPUT onmousedown='allowUncheck(this);' TYPE='radio' NAME='Btn'ID='Btn2'></td>
</form>
</body>
</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...

Commentaire de monstroplante le 29/06/2007 15:26:41

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);

Commentaire de monstroplante le 29/06/2007 18:40:07

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);
}
}
    }
}

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


HTC Tattoo
Entre 9€ et 329€

Visiter le guide achat

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,733 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)