Heim >Web-Frontend >js-Tutorial >Wie schalte ich den Kontrollkästchenstatus mit JavaScript um?

Wie schalte ich den Kontrollkästchenstatus mit JavaScript um?

Susan Sarandon
Susan SarandonOriginal
2024-11-12 12:28:021067Durchsuche

How to Toggle Checkbox State with JavaScript?

So implementieren Sie die Funktion zum Umschalten von Kontrollkästchen mit JavaScript

Um den aktivierten Status eines Kontrollkästchens dynamisch zu verwalten, bietet JavaScript effiziente Lösungen. Lassen Sie uns die verschiedenen Ansätze erkunden:

Umschalten mit nativem JavaScript

Zugriff auf das Kontrollkästchen mithilfe seiner ID mit document.getElementById("checkbox"). Um das Kontrollkästchen zu aktivieren, setzen Sie die Eigenschaft „checked“ auf „true“. Um es umgekehrt zu deaktivieren, setzen Sie die Eigenschaft auf „false“.

// Check
document.getElementById("checkbox").checked = true;

// Uncheck
document.getElementById("checkbox").checked = false;

Umschalten mit jQuery (Version 1.6)

Mit jQuery 1.6 und höher stellt die Prop-Methode Folgendes bereit eine bequeme Möglichkeit, den Status des Kontrollkästchens zu ändern. Um das Kontrollkästchen zu aktivieren, verwenden Sie $().prop("checked", true). Um es zu deaktivieren, verwenden Sie $().prop("checked", false).

// Check
$("#checkbox").prop("checked", true);

// Uncheck
$("#checkbox").prop("checked", false);

Umschalten mit jQuery (Versionen 1.5 und niedriger)

In früher jQuery-Versionen (1.5 und niedriger) verwenden die attr-Methode, um den Kontrollkästchenstatus zu steuern. Die Syntax bleibt dieselbe wie bei der Prop-Methode.

// Check
$("#checkbox").attr("checked", true);

// Uncheck
$("#checkbox").attr("checked", false);

Durch die Verwendung dieser Methoden können Sie den aktivierten Status von Kontrollkästchen basierend auf Benutzerinteraktionen oder programmatischer Logik in Ihrem JavaScript-Code nahtlos steuern.

Das obige ist der detaillierte Inhalt vonWie schalte ich den Kontrollkästchenstatus mit JavaScript um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn