Javascript implementiert Kontrollkästchenauswahlattribute_Javascript-Fähigkeiten

Jeder, der sich mit der Web-Front-End-Entwicklung auskennt, weiß, dass die Beurteilung, ob ein Kontrollkästchen aktiviert ist, häufig durchgeführt wird. Es gibt viele Möglichkeiten zur Beurteilung, aber die Kompatibilität dieser Methoden wird während des Entwicklungsprozesses häufig ignoriert. und der Effekt wird erreicht. Als Blogger habe ich viele Methoden angewendet. Ich habe bei Google oft Artikel gefunden, die über dieses oder jenes schlecht waren, und war später verwirrt. Ich habe heute zufällig einen ausländischen Blog gesehen und fand, dass er ihn sehr gut erklärt. Ich habe vor, ihn ins Chinesische zu übersetzen und einige meiner eigenen Meinungen hinzuzufügen.

Wenn Sie in der Webentwicklung tätig sind und die von Ihnen entwickelten Webseiten Kontrollkästchen enthalten, müssen Sie möglicherweise feststellen, ob das Kontrollkästchen derzeit aktiviert ist, und dann einige bedingte Anweisungen ausführen. Es gibt viele Möglichkeiten, festzustellen, ob ein Kontrollkästchen aktiviert ist.

Lassen Sie uns zunächst einen Blick darauf werfen, wie natives Javascript dieses Attribut bestimmt. Nachdem Sie in JavaScript ein Element ausgewählt haben, können Sie anhand des aktivierten Attributs des Elements leicht feststellen, ob das von Ihnen ausgewählte Kontrollkästchen aktiviert ist.

Sehen wir uns ein Beispiel an: Auf Ihrer Seite gibt es ein Kontrollkästchen und das Kontrollkästchen hat eine eindeutige ID, wie zum Beispiel myCheckBox, wie unten gezeigt:

Code kopieren Der Code lautet wie folgt:

Jetzt wählen wir dieses Element zuerst über Javascript aus und erhalten dann sein geprüftes Attribut.

Code kopieren Der Code lautet wie folgt:

Funktion checkCheckBox() {
If (document.getElementById('myCheckBox').checked) {
                     //Ändern Sie es in „Alarm('Its Checked'); wenn Sie nicht mit der Konsole arbeiten
console.log('Its Checked');
         } sonst {
console.log('Nein, es ist nicht überprüft');
}
}

Wie Sie sehen, wählen wir zuerst das Element anhand der ID aus und bestimmen dann sein aktiviertes Attribut. Wenn das Kontrollkästchen aktiviert ist, ist sein Wert wahr.

Wenn Sie jQuery verwenden und für diese Beurteilung kein natives Javascript verwenden möchten, gibt es viele Möglichkeiten:

Verwendung ist(':checked')

In dieser Verwendung verwenden Sie die is()-Funktion von jQuery. Die Funktion dieser Funktion besteht darin, zu bestimmen, ob das ausgewählte Element oder die ausgewählte Elementsammlung die von Ihnen an die Funktion übergebenen Bedingungsparameter erfüllt. Wenn die Bedingungen erfüllt sind, wird „true“ zurückgegeben, andernfalls wird „false“ zurückgegeben.

Um diese Funktion nutzen zu können, müssen wir das Element auswählen und dann den Wert des Selektors überprüfen: aktiviert. Dieser Selektor funktioniert für Kontrollkästchen, Optionsfelder und Auswahl-Tags.

[/code]
$('input[type="button"]').click(function () {
If ($('#myCheckBox').is(':checked')) {
                     //Ändern Sie es in „Alarm('Its Checked'); wenn Sie nicht mit der Konsole arbeiten
console.log('Its Checked');
         } sonst {
console.log('Nein, es ist nicht überprüft');
}
});
[/code]

Verwenden Sie prop()

Vor jQuery 1.6 wurde die Funktion attr() verwendet, um die Eigenschaften und Attribute von Elementen abzurufen, aber das war sehr verwirrend. Daher wird nach jQuery 1.6 eine neue Funktion prop() verwendet, um den aktuellen Eigenschaftswert des Elements zu erhalten.

Aber vorher müssen wir zunächst den Unterschied zwischen Eigentum und Attributen verstehen. Attribute sind einige Attributwerte, die Sie für HTML-Tags festlegen. Dazu gehören die Klasse und die ID, die Sie für ein Tag festlegen, und sogar der Anfangswert, den Sie für das Eingabefeld festlegen. Wenn Sie den Attributwert nicht im Tag festlegen, sondern den Attributwert über attr() abrufen, tritt undefiniert auf. prop() wird auch verwendet, um den Attributwert eines Elements abzurufen. Der offensichtliche Unterschied zu attr() besteht jedoch darin, dass das erforderliche aktuelle Attribut auch dann korrekt zurückgegeben werden kann, wenn das abzurufende Attribut nicht im HTML-Tag definiert ist Wert.

Gemäß offiziellen Empfehlungen: Eigenschaften mit zwei Attributen von wahr und falsch, wie z. B. aktiviert, ausgewählt oder deaktiviert, verwenden prop() und andere verwenden attr().

Um den Unterschied zwischen den beiden intuitiv darzustellen, können Sie den Wert des Eingabefelds sofort nach dem Laden der Seite ändern. Zu diesem Zeitpunkt werden Sie feststellen, dass Sie attr verwenden, auch wenn sich der Wert Ihres Eingabefelds ändert () um ihn zu erhalten, ändert sich der Eigenschaftswert nicht, wenn sich der Text ändert, aber der über property() erhaltene Eigenschaftswert ändert sich, wenn sich der Inhalt des Textfelds ändert.

Sehen Sie sich ein Beispiel an, hier haben wir ein Eingabefeld mit einem Anfangswertsatz und einigen Attributsätzen:

Code kopieren Der Code lautet wie folgt:

Dann schreiben wir in den JQuery-Code:

Code kopieren Der Code lautet wie folgt:

console.log('Attributwert ist: ' $('#myTextBox').attr('value'));
console.log('Eigenschaftswert ist: ' $('#myTextBox').prop('value'));

Wir werden feststellen, dass der über prop() erhaltene Wert im Eingabefeld immer mit dem darin enthaltenen Wert synchronisiert ist, während der über attr() erhaltene Wert im Eingabefeld immer im HTML-Tag-Wert festgelegt ist.

Code kopieren Der Code lautet wie folgt:

$('input[type="button"]').click(function () {
Alert('Attributwert ist: ' $('#myTextBox').attr('value'));
Alert('Eigenschaftswert ist: ' $('#myTextBox').prop('value'));
});

Filter verwenden: aktiviert

var isChecked = $('#myCheckBox:checked').length > 0;
Eine andere Methode zur Beurteilung des Werts dieses Attributs besteht darin, einen Filter hinzuzufügen: Wird beim Auswählen von Elementen überprüft und beurteilt dann das Attribut des Elements anhand der Länge des erhaltenen Elements. Diese Verwendung wird jedoch nicht empfohlen, da die Antworten, die Sie erhalten, möglicherweise falsch sind, wenn Sie viele Gruppen von Kontrollkästchen auf Ihrer Seite haben und den Klassenselektor anstelle des ID-Selektors verwenden.

Code kopieren Der Code lautet wie folgt:

$('input[type="button"]').click(function () {
If ($('#myCheckBox:checked').length > 0 ) {
//ändern Sie es in warning('Its Checked'); wenn Sie nicht mit der Konsole arbeiten
console.log('Its Checked');
} sonst {
console.log('Nein, es ist nicht überprüft');
}
});

Wir können sehen, dass wir mehrere Methoden haben, um das ausgewählte Attribut des Prüfelements zu erhalten. Dies ist genau das, was Webentwickler häufig verwenden müssen und bei der Auswahl der richtigen Verwendungsweise verwirrt sind.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein, die Javascript lernen.

Bitte nehmen Sie sich einen Moment Zeit, um den Artikel mit Ihren Freunden zu teilen oder einen Kommentar zu hinterlassen. Für Ihre Unterstützung danken wir Ihnen herzlich!