Comment réinitialiser toutes les cases à cocher en utilisant jQuery ou pure JS?

Comment puis-je réinitialiser toutes les cases à cocher d’un document en utilisant jQuery ou pure JS?

Si vous voulez dire comment supprimer l’état “coché” de toutes les cases à cocher:

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

Si vous souhaitez utiliser la fonctionnalité de réinitialisation du formulaire, utilisez plutôt ceci:

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

OU

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

On dirait que removeAttr() ne peut pas être réinitialisé par form.reset() .

La réponse ci-dessus n’a pas fonctionné pour moi –

Les suivants ont fonctionné

 $('input[type=checkbox]').each(function() { this.checked = false; }); 

Cela garantit que toutes les cases à cocher ne sont pas cochées.

Dans certains cas, la case à cocher peut être sélectionnée par défaut. Si vous souhaitez restaurer la sélection par défaut au lieu de la définir comme non sélectionnée, comparez la propriété defaultChecked .

 $(':checkbox').each(function(i,item){ this.checked = item.defaultChecked; }); 

J’ai utilisé ceci avant:

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

semble que .attr et .removeAttr ne fonctionnent pas dans certaines situations.

  $(":checkbox:checked").each(function () { this.click(); }); 

pour décocher la case cochée, retournez votre logique pour faire

Comme dit dans la réponse de Tatu Ulmanen en utilisant le script suivant fera le travail

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

Mais, comme l’a dit Blakomen , après la version 1.6, il vaut mieux utiliser jQuery.prop() place

Notez que dans jQuery v1.6 et versions ultérieures, vous devez utiliser .prop (‘checked’, false) pour une meilleure compatibilité entre les navigateurs.

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

Soyez prudent lorsque vous utilisez jQuery.each() cela peut entraîner des problèmes de performances. (aussi, évitez jQuery.find() dans ces cas. Utilisez chacun à la place)

 $('input[type=checkbox]').each(function() { $(this).prop('checked', false); }); 

Vous pouvez choisir les cases à cocher ou les parties de votre page qui peuvent être cochées et celles qui ne le sont pas. Je suis tombé sur le scénario où j’ai deux formulaires dans ma page et un autre qui contient des valeurs pré-remplies (pour la mise à jour) et d’autres qui doivent être remplies à nouveau.

 $('#newFormId input[type=checkbox]').attr('checked',false); 

Cela rendra uniquement les cases à cocher dans la forme avec l’ID newFormId non coché.

Javascript

 var clist = document.getElementsByTagName("input"); for (var i = 0; i < clist.length; ++i) { clist[i].checked = false; } 

jQuery

 $('input:checkbox').each(function() { this.checked = false; }); 

Pour faire face, voir: Sélectionner toutes les cases à cocher par ID / classe

J’ai utilisé quelque chose comme ça

 $(yourSelector).find('input:checkbox').removeAttr('checked'); 
    Bootstrap Example        
I have a bike
I have a car
I have a bike
I have a car