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)
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.
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
- Déselection d'un bouton radio
- Déselection de boutons radio - Codes sources - Javascript (Formulaire)
- Déselection bouton radio ✓ - Forum - Javascript / DHTML
- Bouton radio php checked ✓ - Forum - PHP
- Java : Création de boutons radio à l’aide de buttongroup et jradiobutton - Code - Guide
- Javascript : Boutons radio (choix...)) - CodeS SourceS - Guide
Commentaires
****************************************************************
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);
}
}
}
}
********************************************************************************
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);
***********************************************************
<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...
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>
************************************************
***********************************************************************
<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>
***********************************************************************
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.