web-dev-qa-db-fra.com

Comment décocher la case d'option cochée

La chose est cette solution ne fonctionne que dans Firefox

$(':radio').on("change", function(event) {
  $(this).prop('checked', true);
});

$(':radio').on("click", function(event) {
  $(this).prop('checked', false);
});

En chrome, cela ne vous permettra pas de sélectionner quoi que ce soit http://jsfiddle.net/wuAWn/

Ofc, je pourrais utiliser variable et écrire quelque chose comme

var val = -1;
$(':radio').on("click", function() {
  if($(this).val() == val) {
    $(this).prop('checked', false);
    val = -1;
  }
  else val = $(this).val();
});

Mais je vais avoir peu de groupes de boutons radio sur ma page et le contenu html est chargé via ajax. Je souhaite donc écrire 1 fonction pour chacun d'entre eux, au lieu de définir des variables pour chaque groupe de boutons radio et d'écrire la même fonction pour chaque bouton radio. groupe.

Edit: merci pour votre aide avec les cases à cocher, mais pour que les cases à cocher agissent comme un groupe de boutons radio, vous devez écrire un javascrip supplémentaire qui décochera toutes les autres cases avec le même nom onclick, j’ai déjà le bouton radio css et c’est plus facile pour moi ajoutez une classe comme look-like-checkbox et faites-la ressembler à une case à cocher, j'utilise une bibliothèque uniforme pour un look personnalisé, voici ma solution bizarre http://jsfiddle.net/wuAWn/9/

javascriptjqueryradio-button
29
ccd580ac6753941c6f84fe2e19f229

Ce script simple vous permet de décocher un bouton radio déjà coché. Fonctionne sur tous les navigateurs activés javascript.

var allRadios = document.getElementsByName('re');
var booRadio;
var x = 0;
for(x = 0; x < allRadios.length; x++){
  allRadios[x].onclick = function() {
    if(booRadio == this){
      this.checked = false;
      booRadio = null;
    } else {
      booRadio = this;
    }
  };
}
<input type='radio' class='radio-button' name='re'>
<input type='radio' class='radio-button' name='re'>
<input type='radio' class='radio-button' name='re'>
37
Kzest

Les boutons radio sont censés être des options obligatoires ... Si vous souhaitez les désactiver, cochez la case correspondante, il n'est pas nécessaire de compliquer les choses et autorisez les utilisateurs à désélectionner un bouton radio; supprimer JQuery vous permet de sélectionner l'un d'entre eux

10
Brad

Vous pourriez envisager d’ajouter un bouton radio supplémentaire à chaque groupe appelé "aucun" ou similaire. Cela peut créer une expérience utilisateur cohérente sans compliquer le processus de développement.

7
olleicua

essaye ça

une seule fonction pour toutes les radios a la classe "radio-button"

travailler dans chrome et FF

$('.radio-button').on("click", function(event){
  $('.radio-button').prop('checked', false);
  $(this).prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type='radio' class='radio-button' name='re'>
<input type='radio'  class='radio-button' name='re'>
<input type='radio'  class='radio-button' name='re'>
3
sangram parmar