Wie kann ich alle Kontrollkästchen in einem Dokument mit jQuery oder reinem JS zurücksetzen?
Wie kann ich alle Kontrollkästchen in einem Dokument mit jQuery oder reinem JS zurücksetzen?
Antworten:
Wenn Sie meinen, wie Sie den Status "Aktiviert" aus allen Kontrollkästchen entfernen:
$('input:checkbox').removeAttr('checked');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().
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;
}); Ich habe dies schon einmal benutzt:
$('input[type=checkbox]').prop('checked', false);Anscheinend funktionieren .attr und .removeAttr in einigen Situationen nicht.
Bearbeiten: Beachten Sie, dass Sie in jQuery v1.6 und höher verwenden sollten .prop('checked', false) stattdessen eine bessere browserübergreifende Kompatibilität verwenden sollten - siehe https://api.jquery.com/prop
Kommentar hier: Wie setze ich alle Kontrollkästchen mit jQuery oder reinem JS zurück?
var clist = document.getElementsByTagName("input");
for (var i = 0; i < clist.length; ++i) { clist[i].checked = false; }$('input:checkbox').each(function() { this.checked = false; });Weitere Informationen finden Sie unter: Aktivieren Sie alle Kontrollkästchen nach ID / Klasse
$(":checkbox:checked").each(function () {
this.click();
});Um das Kontrollkästchen zu deaktivieren, drehen Sie Ihre Logik um, um das Gegenteil zu tun
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.
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);
});Ich habe so etwas benutzt
$(yourSelector).find('input:checkbox').removeAttr('checked');<!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>