begin process at 2012 05 28 13:26:50
  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 :9 420
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 FORMULAIRE TABLEAU par vic511
Source avec Zip Source avec une capture FORMULAIRE DYNAMIQUE par Niidhogg
Source avec Zip Source avec une capture CONTRAINTE DE SAISIE SUR CHAMPS INPUT par ryosama
SELECTS DÉPENDANTS PRÉ-CHARGÉS D'UNE SEULE OPTION par phm
Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai
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


Apple iPhone 4 Noir (32 Go)
Entre 1290€ et 1333€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
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 : 1,310 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)