Wie setze ich alle Kontrollkästchen mit jQuery oder reinem JS zurück?

83

Wie kann ich alle Kontrollkästchen in einem Dokument mit jQuery oder reinem JS zurücksetzen?

javascript jquery checkbox Straßenparade
quelle

Antworten:

143

Wenn Sie meinen, wie Sie den Status "Aktiviert" aus allen Kontrollkästchen entfernen:

$('input:checkbox').removeAttr('checked');
Tatu Ulmanen
quelle
Dieses Skript schaltet den Status der Kontrollkästchen um. Ich bin mir nicht sicher, ob ich etwas falsch mache
Sundeep
37
Beachten Sie, dass Sie in jQuery v1.6 und höher stattdessen .prop ('geprüft', falsch) verwenden sollten, um eine bessere browserübergreifende Kompatibilität zu erreichen - siehe api.jquery.com/prop
Henry C
Ich habe dies verwendet, um das Formular zurückzusetzen, bevor ich einen neuen Dialog öffnete. Danach muss ich ein Kontrollkästchen aktivieren und das funktioniert nicht. Wenn ich mir den generierten Code ansehe, ist er 'markiert', aber auf meiner Seite ist er nicht $ ('Eingabe: Kontrollkästchen'). RemoveAttr ('geprüft'); $ ('input [value =' + val + ']'). attr ('geprüft', wahr);
Gayane
1
Dies ist nun eine veraltete Antwort - siehe: stackoverflow.com/questions/17420534/...
raison
47

Wenn Sie die Rücksetzfunktion des Formulars verwenden möchten, sollten Sie Folgendes verwenden:

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

ODER

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

Sieht aus wie removeAttr()kann nicht von zurückgesetzt werden form.reset().

Kevin Q. Yu
quelle
1
Obwohl die akzeptierte Antwort auch funktioniert, finde ich dies der beste Weg, dies zu tun. Bitte, wenn Sie dies lesen, ziehen Sie in Betracht, diesen Weg zu verwenden, da dies die beste Vorgehensweise ist.
Rafaelmorais
13

Die obige Antwort hat bei mir nicht funktioniert -

Folgendes hat funktioniert

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

Dadurch wird sichergestellt, dass alle Kontrollkästchen deaktiviert sind.

Sundeep
quelle
11

In einigen Fällen ist das Kontrollkästchen standardmäßig aktiviert. Wenn Sie die Standardauswahl wiederherstellen möchten, anstatt sie als nicht ausgewählt festzulegen, vergleichen Sie die defaultCheckedEigenschaft.

$(':checkbox').each(function(i,item){ 
        this.checked = item.defaultChecked; 
});
Dean Burge
quelle
4 
 $(":checkbox:checked").each(function () {

 this.click(); 
});

Um das Kontrollkästchen zu deaktivieren, drehen Sie Ihre Logik um, um das Gegenteil zu tun

Yene Mulatu
quelle
3

Sie können auswählen, für welchen Teil oder Teil Ihrer Seite Kontrollkästchen aktiviert werden sollen und für welche nicht. Ich bin auf das Szenario gestoßen, in dem ich zwei Formulare auf meiner Seite habe und eines vorab ausgefüllte Werte (zur Aktualisierung) hat und das andere neu ausgefüllt werden muss.

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

Dadurch werden nur Kontrollkästchen im Formular mit der deaktivierten ID newFormId aktiviert.

Kavinder
quelle
2

Wie in Tatu Ulmanens Antwort mit dem folgenden Skript erwähnt, wird dies den Job erledigen

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

Aber, wie Blakomens Kommentar sagte, ist es nach Version 1.6 besser, jQuery.prop()stattdessen zu verwenden

Beachten Sie, dass Sie in jQuery v1.6 und höher stattdessen .prop ('geprüft', falsch) verwenden sollten, um eine bessere browserübergreifende Kompatibilität zu erreichen

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

Seien Sie vorsichtig, wenn Sie jQuery.each()es verwenden, da dies zu Leistungsproblemen führen kann. (Vermeiden Sie jQuery.find()in diesem Fall auch. Verwenden Sie stattdessen alle)

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

Ich habe so etwas benutzt

$(yourSelector).find('input:checkbox').removeAttr('checked');
Andrej Gaspar
quelle
1 
<!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>
Ankush
quelle
3
Nur-Code-Antworten werden nicht empfohlen. Sie möchten wirklich einige Erklärungen hinzufügen.
GhostCat