web-dev-qa-db-fra.com

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

Comment réinitialiser toutes les cases d'un document à l'aide de jQuery ou de JS pur?

javascriptjquerycheckbox
75
streetparade

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

$('input:checkbox').removeAttr('checked');
138
Tatu Ulmanen

Si vous souhaitez utiliser la fonctionnalité de réinitialisation du formulaire, vous feriez mieux d'utiliser ceci:

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

OR

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

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

38
Kevin Q. Yu

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

Ce qui suit a travaillé

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

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

13
Sundeep

J'ai déjà utilisé cela auparavant:

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

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

edit: Notez que dans jQuery version 1.6 et ultérieure, vous devez utiliser .prop ('vérifié', false) à la place pour une meilleure compatibilité entre navigateurs - voir api.jquery.com/prop

Commentez ici: Comment réinitialiser toutes les cases en utilisant jQuery ou JS pur?

9
jef

Dans certains cas, la case à cocher peut être sélectionnée par défaut. Si vous souhaitez 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
Dean Burge
 $(":checkbox:checked").each(function () {

 this.click(); 
});

pour décocher la case cochée, tournez votre logique pour faire le contraire

4
Yene Mulatu

Vous pouvez choisir le type de partie ou de partie de votre page qui peut être coché ou non. Je suis tombé sur le scénario dans lequel j'ai deux formulaires sur ma page et l'un a des valeurs préremplies (pour la mise à jour) et l'autre doit être rempli à nouveau.

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

cela ne fera que des cases à cocher sous la forme avec l'ID newFormId comme non coché.

3
kavinder

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

3
kenorb

Comme dit dans réponse de Tatu Ulmanen utiliser le script suivant fera l'affaire

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

Mais, comme commentaire de Blakomen , après la version 1.6, il est préférable d'utiliser jQuery.prop() à la place

Notez que dans jQuery version 1.6 et ultérieure, vous devez utiliser .prop ('vérifié', false) à la place pour une plus grande compatibilité entre navigateurs.

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

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

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

J'ai utilisé quelque chose comme ça

$(yourSelector).find('input:checkbox').removeAttr('checked');
1
Andrej BlackFlash
<!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>
1
ankush