jquery select nicht aktiviert

jQuery ist eines der beliebtesten Tools in JS. Es bietet viele einfache und benutzerfreundliche Methoden, die uns die Verarbeitung von DOM-Elementen in Webseiten erleichtern. Bei der Verarbeitung von Formularen müssen wir häufig die ausgewählten Radio- und Kontrollkästchenelemente in den Formularelementen auswählen. Gelegentlich stoßen wir jedoch auf eine solche Situation. Wie wählt man Elemente aus, die kein aktiviertes Attribut im Formular haben?

Zuerst müssen wir den Status der Formularelemente verstehen. Für ein Optionsfeld und ein Kontrollkästchen ist der Status aktiviert. Dieser Status kann wahr oder falsch sein. Wenn er aktiviert ist, ist er wahr, andernfalls ist er falsch. Im DOM können wir über das Attribut „checked“ darauf zugreifen.

Für Optionsfelder wird nur eines ausgewählt. Der folgende HTML-Code ist ein Formularelement, das aus zwei Optionsfeldern besteht:

<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女

Durch Zugriff auf das aktivierte Attribut können wir das ausgewählte Optionsfeldelement finden:

var selectedRadio = $('input[name="gender"]:checked');

Für Kontrollkästchen können mehrere Auswahlmöglichkeiten vorhanden sein. Der folgende HTML-Code ist ein Formularelement, das aus zwei Kontrollkästchen besteht:

<input type="checkbox" name="interest" value="music" checked>音乐
<input type="checkbox" name="interest" value="sports">运动

Wir können das ausgewählte Kontrollkästchenelement finden, indem wir auf das aktivierte Attribut zugreifen:

var selectedCheckbox = $('input[name="interest"]:checked');

Wenn es jedoch kein aktiviertes Attribut im Formularelement gibt, was sollen wir dann tun? Tun? ?

Methode 1: Verwenden Sie die Pseudoklasse :has() des Selektors.

Wir können die Pseudoklasse :has() des jQuery-Selektors verwenden, die übergeordnete Elemente mit bestimmten untergeordneten Elementen auswählen kann. Für Optionsfelder und Kontrollkästchen, die kein aktiviertes Attribut haben, können wir die Pseudoklasse :not() verwenden, um sie zu filtern, und dann die Pseudoklasse :has() verwenden, um ihre übergeordneten Elemente auszuwählen.

Zum Beispiel haben wir den folgenden HTML-Code:

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

Wir können das übergeordnete Element eines nicht markierten Optionsfelds mit dem folgenden Code auswählen:

var unselectedRadioParent = $('input[name="gender"]:not(:checked)').parent();

Ähnlich können wir für das Checkbox-Element einen ähnlichen Ansatz verwenden:

var unselectedCheckboxParent = $('input[name="interest"]:not(:checked)').parent();

Es ist erwähnenswert, dass der Pseudoklassenselektor :not() relativ leistungsintensiv ist. Daher wird empfohlen, die zweite Methode zu verwenden, wenn Ihr Formular eine große Anzahl von Optionsfeld- oder Kontrollkästchenelementen enthält.

Methode 2: Verwenden Sie die Methode filter()

Die Methode filter() wird verwendet, um die Sammlung von Elementen zu filtern, die einem bestimmten Selektor oder einer bestimmten Funktion entsprechen. Wir können die Methode filter() verwenden, um alle ausgewählten Optionsfeld- oder Kontrollkästchenelemente herauszufiltern, und dann die Methode not() verwenden, um andere Elemente herauszufiltern.

Zum Beispiel können wir für die folgende Optionsfeldgruppe den folgenden Code verwenden, um die nicht aktivierten Optionsfeldelemente auszuwählen:

var unselectedRadio = $('input[name="gender"]').not(':checked');

Ähnlich können wir für die folgende Kontrollkästchengruppe den folgenden Code verwenden, um die nicht aktivierten Kontrollkästchen auszuwählen Box-Element:

var unselectedCheckbox = $('input[name="interest"]').not(':checked');

Zusammenfassung

In Formularelementen müssen wir häufig ausgewählte Optionsfelder und Kontrollkästchenelemente auswählen. Wenn im Formularelement kein aktiviertes Attribut vorhanden ist, können wir die Pseudoklasse :has() oder die Methode filter() des Selektors verwenden, um nicht aktivierte Optionsfeld- und Kontrollkästchenelemente auszuwählen. Diese Methoden bieten uns flexiblere Auswahlmöglichkeiten bei der Verarbeitung von Formularen und ermöglichen uns die einfache Handhabung von Formularen in verschiedenen Situationen.

Das obige ist der detaillierte Inhalt vonjquery select nicht aktiviert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!