web-dev-qa-db-fra.com

Comment décocher un bouton radio en cliquant dessus?

Contrairement aux cases à cocher, il est impossible pour l'utilisateur de désélectionner les boutons radio une fois qu'ils sont cliqués. Existe-t-il un moyen de les modifier par programmation en utilisant Javascript? Ce serait de préférence sans utiliser jQuery.

javascripthtmlradio-button
35
Student

Moesz ustawić właściwość obiektu HTML checked na false w następujący sposób:

document.getElementById('desiredInput').checked = false;

przykład JavaScript

przykład jQuery

PS: PrzytrzymajCtrlklawisz, aby odznaczyć.

48
Teneff

Les boutons radio sont destinés à être utilisés dans des groupes, définis par le partage du même attribut name. Ensuite, cliquer sur l'un d'eux désélectionne celui qui est actuellement sélectionné. Pour permettre à l'utilisateur d'annuler une «vraie» sélection qu'il a faite, vous pouvez inclure un bouton radio qui correspond à un choix nul, comme «Ne sait pas» ou «Pas de réponse».

Si vous voulez un seul bouton qui peut être coché ou décoché, utilisez une case à cocher.

Il est possible (mais normalement pas pertinent) de désélectionner un bouton radio en JavaScript, simplement en définissant sa propriété checked sur false, par exemple.

<input type=radio name=foo id=foo value=var>
<input type=button value="Uncheck" onclick=
"document.getElementById('foo').checked = false">
11
Jukka K. Korpela

Enveloppé dans un plugin

Limites:

  1. Exiger un élément de formulaire
  2. Doit déclencher un événement de clic lorsque le bouton radio est modifié par programmation

(function($) {
  $.fn.uncheckableRadio = function() {
    var $root = this;
    $root.each(function() {
      var $radio = $(this);
      if ($radio.prop('checked')) {
        $radio.data('checked', true);
      } else {
        $radio.data('checked', false);
      }
        
      $radio.click(function() {
        var $this = $(this);
        if ($this.data('checked')) {
          $this.prop('checked', false);
          $this.data('checked', false);
          $this.trigger('change');
        } else {
          $this.data('checked', true);
          $this.closest('form').find('[name="' + $this.prop('name') + '"]').not($this).data('checked', false);
        }
      });
    });
    return $root;
  };
}(jQuery));

$('[type=radio]').uncheckableRadio();
$('button').click(function() {
  $('[value=V2]').prop('checked', true).trigger('change').trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <label><input name="myRadio" type="radio" value="V1" /> R1</label>
  <label><input name="myRadio" type="radio" value="V2" /> R2</label>
  <label><input name="myRadio" type="radio" value="V3" /> R3</label>
  <button type="button">Change R2</button>
</form>

10
Dummy

En tant que bouton radio principalement utilisé en groupe, il est beaucoup plus facile de les saisir par getElementsByName( ' ' ); dans votre balise script. Cela renverra un tableau, mettra un écouteur d'événement sur chaque enfant du tableau et définira l'état de vérification. Regardez cet échantillon. 

var myRadios = document.getElementsByName('subscribe');
var setCheck;
var x = 0;
for(x = 0; x < myRadios.length; x++){

    myRadios[x].onclick = function(){
        if(setCheck != this){
             setCheck = this;
        }else{
            this.checked = false;
            setCheck = null;
    }
    };

}

Ce guide explique comment le code fonctionne avec une démonstration visuelle.

7
user3716078

C’est ma réponse (bien que je l’ai faite avec jQuery mais uniquement pour les sélecteurs et pour ajouter et supprimer une classe, de sorte que vous puissiez facilement la remplacer par des sélecteurs JS purs et un attribut JS add pur)

<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>

$(document).on("click", "input[name='radioBtn']", function(){
    thisRadio = $(this);
    if (thisRadio.hasClass("imChecked")) {
        thisRadio.removeClass("imChecked");
        thisRadio.prop('checked', false);
    } else { 
        thisRadio.prop('checked', true);
        thisRadio.addClass("imChecked");
    };
})
7
Shmili Breuer

bien qu’il ait été demandé en termes de javascript, l’adaptation de jquery est triviale ... avec cette méthode, vous pouvez vérifier la valeur "null" et la transmettre ... 

var checked_val = "null";
$(".no_option").on("click", function(){
  if($(this).val() == checked_val){
  	$('input[name=group][value=null]').prop("checked",true);
    checked_val = "null";
  }else{
  	checked_val = $(this).val();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="group" class="no_option" value="0">option 0<br>
<input type="radio" name="group" class="no_option" value="1">option 1<br>
<input type="radio" name="group" class="no_option" value="2">option 2<br>
<input type="radio" name="group" class="no_option" value="3">option 3<br>
<input type="radio" name="group" class="no_option" value="4">option 4<br>
<input type="radio" name="group" class="no_option" value="5">option 5<br>
<input type="radio" name="group" class="no_option" value="6">option 6<br>
<input type="radio" name="group" class="no_option" value="null" style="display:none">

2
me_

Extension de la réponse de user3716078 pour autoriser plusieurs groupes de boutons radio indépendants et un moyen plus simple d'assigner des écouteurs d'événements à plusieurs éléments ...

window.onload = function() {

    var acc_checked=[];

    [].slice.call(document.querySelectorAll('.accordion input[type="radio"]')).forEach(function(el,i){
        /**
         * i represents the integer value of where we are in the loop
         * el represents the element in question in the current loop
         */
        el.addEventListener('click', function(e){

            if(acc_checked[this.name] != this) {
                acc_checked[this.name] = this;
            } else {
                this.checked = false;
                acc_checked[this.name] = null;
            }

        }, false);

    });

}
1
A2D

C'est ce que je suis venu à:

function uncheck_radio_before_click(radio) {
    if(radio.prop('checked'))
        radio.one('click', function(){ radio.prop('checked', false); } );
}
$('body').on('mouseup', 'input[type="radio"]', function(){
    var radio=$(this);
    uncheck_radio_before_click(radio);
})
$('body').on('mouseup', 'label', function(){
    var label=$(this);
    var radio;
    if(label.attr('for'))
        radio=$('#'+label.attr('for')).filter('input[type="radio"]');
    else
        radio=label.children('input[type="radio"]');
    if(radio.length)
        uncheck_radio_before_click(radio);
})

http://jsfiddle.net/24vft2of/2/

1
my_stk_oflw_account

Je suis venu ici parce que j'avais le même problème. Je voulais présenter les options à l'utilisateur tout en laissant la possibilité de rester vide. Bien que cela soit possible de coder explicitement en utilisant des cases à cocher qui compliqueraient le back-end.

Avoir l’utilisateur Ctrl + clic revient presque à le décocher via la console. Arriver à la souris est trop tôt et onclick est trop tard.

Enfin, voici une solution! Il suffit de mettre ces quelques lignes une fois sur la page et vous l’avez créée pour tous les boutons radio de la page. Vous pouvez même jouer avec le sélecteur pour le personnaliser.

window.onload = function(){
document.querySelectorAll("INPUT[type='radio']").forEach(function(rd){rd.addEventListener("mousedown",
	function(){
		if (this.checked) {this.onclick=function(){this.checked=false}} else{this.onclick=null}
	})})}
<input type=radio name=unchecksample> Number One<br>
<input type=radio name=unchecksample> Number Two<br>
<input type=radio name=unchecksample> Number Three<br>
<input type=radio name=unchecksample> Number Four<br>
<input type=radio name=unchecksample> Number Five<br>

0
HaLeiVi

Si vous utilisez le branchement Iclick, c’est aussi simple que vous voyez ci-dessous.

 $('#radio1').iCheck('uncheck');
0
MEO

Dans le code de création d'objet de bouton radio, incluez ces trois lignes:

  obj.check2 = false;    // add 'check2', a user-defined object property
  obj.onmouseup = function() { this.check2 = this.checked };
  obj.onclick = function() { this.checked = !this.check2 };
0
Cruzan

Vous pouvez utiliser la propriété checked d'un bouton radio pour la désélectionner.

Quelque chose comme ça:

<script>
 function uncheck()
 {
  document.getElementById('myRadio').checked = false;        
 }
 function check()
 {
  document.getElementById('myRadio').checked = true;        
 }
</script>
<input id="myRadio" type="radio" checked="checked"/>
<button onclick="uncheck();">Uncheck</button>
<button onclick="check();">Check</button>

Voir en action ici: http://jsfiddle.net/wgYNa/

0
gideon

Malheureusement, cela ne fonctionne pas dans Chrome ou Edge, mais cela fonctionne dans FireFox:

$(document)
// uncheck it when clicked
.on("click","input[type='radio']", function(){ $(this).prop("checked",false); })
// re-check it if value is changed to this input
.on("change","input[type='radio']", function(){ $(this).prop("checked",true); });
0
Frank Forte

Le code complet ressemblera à quelque chose comme ça

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<input name="radio" type="radio" id="myRadio" value="myRadio" checked="checked"     onclick="setRadio(this)" />
<label for="myRadio"></label>


<script language="javascript">
function setRadio(obj) 
{
    obj.checked = false;
}
</script>
</body>
</html>
0
kiranvj

Voici un exemple de cas où il est sans doute approprié de décocher les boutons radio autrement qu'en effectuant une nouvelle sélection. J'ai un dictionnaire dont les entrées peuvent être sélectionnées à l'aide d'une variété d'index. Quel index utiliser est sélectionné au moyen d’un ensemble de boutons radio. Cependant, il existe également un bouton "entrée aléatoire" que l'utilisateur peut utiliser s'il souhaite simplement naviguer. Le fait de laisser un index en place lorsque l'entrée a été sélectionnée à l'aide du bouton d'entrée aléatoire serait trompeur. Par conséquent, lorsque vous appuyez sur ce bouton, je désactive tous les boutons radio de sélection d'index et remplace le contenu du cadre d'index par une page vide. .

0
Bill Poser