.prop('checked',false) ou .removeAttr('checked') ?

Question

Avec l'introduction de la méthode prop, j'ai maintenant besoin de connaître la manière acceptée de décocher une case à cocher. Est-ce que c'est :

$('input').filter(':checkbox').removeAttr('checked');

ou

$('input').filter(':checkbox').prop('checked',false);

Answer 1

jQuery 3

A partir de jQuery 3, removeAttr fait pas définir la propriété correspondante à false plus :

Avant jQuery 3.0, l'utilisation de .removeAttr() sur un attribut booléen tel que checked , selected ou readonly mettrait également la propriété nommée correspondante à false . Ce comportement était nécessaire pour les anciennes versions d'Internet Explorer mais n'est pas correct pour les navigateurs modernes car l'attribut représente la valeur initiale et la propriété représente la valeur actuelle (dynamique).

C'est presque toujours une erreur d'utiliser .removeAttr( "checked" ) sur un élément DOM. La seule fois où cela peut être utile est si le DOM est ensuite sérialisé en une chaîne HTML. Dans tous les autres cas, .prop( "checked", false ) doit être utilisé à la place.

Changelog

Donc seulement .prop('checked',false) est la manière correcte d'utiliser cette version.

---

Réponse originale (de 2011) :

Pour les attributs qui ont des propriétés booléennes sous-jacentes (dont le checked en est un), removeAttr définit automatiquement la propriété sous-jacente à false . (Notez que cela fait partie des "corrections" de compatibilité ascendante ajoutées dans jQuery 1.6.1).

Donc, l'un ou l'autre fonctionnera... mais le deuxième exemple que vous avez donné (utilisant prop ) est le plus correct des deux. Si votre objectif est de décocher la case à cocher, vous voulez vraiment affecter l'attribut propriété et non l'attribut, et il n'y a pas besoin de passer par removeAttr pour le faire.

Answer 2

Utiliser checked : propriété true, false de la case à cocher.

jQuery :

if($('input[type=checkbox]').is(':checked')) {
    $(this).prop('checked',true);
} else {
    $(this).prop('checked',false);
}

Answer 3

Je recommande d'utiliser les deux, prop et attr, car j'ai eu des problèmes avec Chrome et je les ai résolus en utilisant les deux fonctions.

if ($(':checkbox').is(':checked')){
    $(':checkbox').prop('checked', true).attr('checked', 'checked');
}
else {
    $(':checkbox').prop('checked', false).removeAttr('checked');
}

Answer 4

Une autre alternative pour faire la même chose est de filtrer sur type=checkbox attribut :

$('input[type="checkbox"]').removeAttr('checked');

ou

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

Rappelez-vous que la différence entre les attributs et les propriétés peut être importante dans des situations spécifiques. Avant jQuery 1.6 la méthode .attr() prenait parfois en compte les valeurs des propriétés lors de la récupération de certains attributs, ce qui pouvait entraîner un comportement incohérent. Depuis jQuery 1.6, la méthode .prop() permet de récupérer explicitement les valeurs des propriétés, tandis que la méthode .attr() récupère les attributs.

En savoir plus ...

Answer 5

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>   

  <input id="checkbox" type="checkbox" onchange='act(this)'>

  <input id="checkbox" type="checkbox" onchange='act(this)'>

  <script>

   function act(element){

       if($(element). prop('checked'))  
       {
           console.log('You have Checked it');
       }else
       {
        console.log('You Un-Checked it');
       }
   }

   </script>