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

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

64
demandé sur Karol Selak 2010-02-17 13:14:07

11 réponses

si vous voulez dire comment supprimer l'état "vérifié" de toutes les cases à cocher:

$('input:checkbox').removeAttr('checked');
126
répondu Tatu Ulmanen 2010-02-17 10:16:42

si vous voulez utiliser la fonction réinitialisation du formulaire, vous feriez mieux d'utiliser ceci:

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

ou

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

ressemble à removeAttr() ne peut pas être réinitialisé par form.reset() .

25
répondu Kevin Q. Yu 2018-04-16 14:19:22

La réponse ci-dessus n'a pas de travail pour moi -

ouvrés""

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

cela permet de s'assurer que toutes les cases à cocher ne sont pas cochées.

12
répondu Sundeep 2011-05-17 18:59:31

dans certains cas, la case à cocher peut être sélectionnée par défaut. Si vous voulez restaurer la sélection par défaut plutôt que de la définir comme non sélectionnée, comparez la propriété defaultChecked .

$(':checkbox').each(function(i,item){ 
        this.checked = item.defaultChecked; 
}); 
8
répondu Dean Burge 2014-02-21 05:39:23

j'ai déjà utilisé ceci avant:

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

semble-t-il .attr et .removeAttr ne fonctionne pas pour certaines situations.

5
répondu jef 2016-11-15 21:52:04
 $(":checkbox:checked").each(function () {

 this.click(); 
});

non cochée case est cochée, mettez votre logique à faire face

3
répondu Yene Mulatu 2012-04-17 13:32:19

Comme on dit dans Tatu Ulmanen la réponse de à l'aide de la suivre script va faire le travail

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

mais, comme Blakomen's comment dit, après la version 1.6 il est préférable d'utiliser jQuery.prop() au lieu de

noter que dans jQuery v1.6 et plus, vous devriez utiliser .prop ('coché', false) au lieu de cela pour un plus grand cross-browser compatibilité

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

soyez prudent lorsque vous utilisez jQuery.each() il peut causer des problèmes de performance. (éviter aussi jQuery.find() dans ce cas. Utilisez Chaque à la place)

$('input[type=checkbox]').each(function() 
{ 
    $(this).prop('checked', false); 
});
2
répondu Michel Ayres 2017-05-23 11:47:29

vous pouvez être sélectif de ce que div ou partie de votre page peut avoir des cases à cocher vérifié et qui ne le font pas. Je suis tombé sur le scénario où j'ai deux formulaires dans ma page et un ont des valeurs pré-remplies(pour la mise à jour) et d'autres ont besoin d'être remplis à nouveau.

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

cela ne fera que les cases à cocher en forme avec id newFormId comme unchecked.

2
répondu kavinder 2014-08-08 05:40:56

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 le contraire, voir: sélectionner toutes les cases à cocher par ID / Classe

2
répondu kenorb 2018-01-10 16:59:53

j'ai utilisé quelque chose comme ça

$(yourSelector).find('input:checkbox').removeAttr('checked');
1
répondu Andrej BlackFlash 2013-08-18 15:03:36
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container check">
<button class="btn">click</button>
  <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car<br>
</div>
<script>
$('.btn').click(function() {

$('input[type=checkbox]').each(function() 
{ 
        this.checked = false; 
}); 
})
</script>
</body>
</html>
0
répondu ankush 2017-09-05 18:28:11