web-dev-qa-db-fra.com

Désélectionnez le bouton radio lors d'un clic à l'aide de jQuery

Les boutons radio ne sont pas cochés uniquement lors de l'actualisation de la page

<input type="radio" name="test">
    1<input type="radio" name="test">2
   <input type="button" id="btn" />

$("#btn").click(function(){

$(':radio').each(function () {
        $(this).removeAttr('checked');
        $('input[type="radio"]').attr('checked', false);
    })

});

J'ai créé un fiddlehttp://jsfiddle.net/8jKJc/220/

Mais ça ne marche pas avec Bootstrap 

jqueryhtmltwitter-bootstrapradio-buttonunchecked
14
DON

Utilisez .prop au lieu de .attr:

$('input[type="radio"]').prop('checked', false);

[ Démo ]

14
Mohit Kumar

Utilisez ceci :

 $(this).prop('checked', false);
 //$('input[type="radio"]').attr('checked', false);

Vous pouvez voir ceci link pour différencier .prop() avec .attr(). .attr() convient pour accéder aux attributs d'élément HTML tels que(name, id, class,etc..) et .prop() pour les propriétés d'élément DOM qui ont renvoyé une valeur booléenne dans la plupart des cas. 

De jQuery page officielle:

Par exemple, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked et defaultSelected doivent être extraits et définis avec la méthode .prop () Avant jQuery 1.6, ces propriétés étaient récupérables avec la méthode .attr (), mais cela ne faisait pas partie de la portée de attr. Ceux-ci n'ont pas d'attributs correspondants et ne sont que des propriétés.

5
Norlihazmey Ghazali

en utilisant la fonction intégrée .prop ().

$('input[type="radio"]').prop('checked', false);
3
user5259715

Son utilisation facile ci-dessous vous aidera à:

$("input:checked").removeAttr("checked");

Vérifiez votre mise à jour Fiddle ici

2
ketan

Si vous utilisez jQuery> 1.5, vous devez utiliser prop au lieu de attr.

$('input[type="radio"]').prop('checked', false);

Démo ici .

Voir ici pour plus de détails.

2
Andrea Salicetti

.prop définit uniquement les propriétés, pas les attributs.

API jQuery

Ou vous pouvez utiliser is pour le faire

$("#btn").click(function(){
$("input[type='radio']").each(function() {
if($(this).is(':checked')){
  $(this).prop('checked',false);
   }
});
});
0
Varun

astuces:

  • changement de fonction pas correct 
  • utilisez la fonction click
  • n'utilisez pas setTimeout ()!
<style>
    .radio-button {
       display: block;
       position: relative;
       min-height: 34px;
       margin-bottom: 0px;
    }
    .radio-button input {
       position: relative;
       opacity: 1;
       cursor: pointer;
    }
    .radio-button span {
       position: absolute;
       height: 18px;
       width: 18px;
       background-color: #fff;
       border: 1px solid #222;
       border-radius: 2px;
       cursor: pointer;
    }
    .radio-button input:checked + span {
       background-color: #222;
    }
    .radio-button span:after {
       top: 9px;
       left: 9px;
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: #fff;
    }
</style>

<div class="question-row">
    <div class="radio-button">
        <input type="radio" name="1" value="1">
        <span></span>
    </div>
    <div class="radio-button">
        <input type="radio" name="1" value="2">
        <span></span>
    </div>
    <div class="radio-button">
        <input type="radio" name="1" value="3">
        <span></span>
    </div>
    <div class="radio-button">
        <input type="radio" name="1" value="4">
        <span></span>
    </div>
</div>

<script>
    $(document).on('click', '.radio-button span', function () {
        var questionRow = $(this).closest('.question-row')[0],
        input = $(this).closest('.radio-button').find('input')[0];
        $(questionRow).find('input').prop('checked', 
            false).removeAttr('checked');
        $(questionRow).find('span').not($(this)).removeClass('checked');
        if ($(this).hasClass('checked')) {
            $(this).removeClass('checked');
            $(input).prop('checked', false);
        } else {
            $(this).addClass('checked');
            $(input).prop('checked', true);
        }
    })
</script>
0
mojtaba ramezani