jQuery Prägnant HTML-Formulare und jQuery

Formularelemente deaktivieren / aktivieren

Mit jQuery können Sie Formularelemente einfach deaktivieren, indem Sie den deaktivierten Attributwert eines Formularelements auf "deaktiviert" setzen. Dazu wählen wir einfach eine Eingabe aus und verwenden dann die attr () Als Methode setzen wir das disabled-Attribut der Eingabe auf den Wert disabled.

        

Um ein deaktiviertes Formularelement zu aktivieren, entfernen Sie einfach das deaktivierte Attribut mit removeAttr () oder legen Sie den deaktivierten Attributwert mit leer fest attr ().

        

So stellen Sie fest, ob ein Formularelement deaktiviert oder aktiviert ist

Verwenden der jQuery-Formularfilterausdrücke :deaktiviert oder :aktiviert, Es ist ziemlich einfach zu wählen (boolescher Wert), ob ein Formularelement deaktiviert oder aktiviert ist. Untersuchen Sie den folgenden Code zur Verdeutlichung.

         

Auswählen / Löschen eines einzelnen Kontrollkästchens oder eines Optionsfelds

Sie können eine Optionsfeld-Eingabe auswählen oder ein Kontrollkästchen aktivieren, indem Sie das entsprechende Feld auswählen geprüft zuschreiben wahr Verwendung der attr ().

         

Um eine Optionsfeld-Eingabe oder ein Kontrollkästchen zu löschen, entfernen Sie das markierte Attribut einfach mit removeAttr () Methode oder setzen Sie die geprüft Attributwert für eine leere Zeichenfolge.

         

Auswählen / Löschen mehrerer Kontrollkästchen oder Optionsfeld-Eingaben

Sie können jQuery verwenden val () an mehreren Kontrollkästchen-Eingängen oder Optionsfeld-Eingängen, um die Eingänge auf aktiviert zu setzen. Dies geschieht durch Übergeben der val () method Ein Array, das eine Zeichenfolge enthält, die mit dem Kontrollkästchen Eingabe- oder Optionsfeld-Eingabewertattribut übereinstimmt.

           

Anmerkungen: Wenn das Kontrollkästchen oder das Optionsfeld bereits ausgewählt ist, verwenden Sie val () löscht das Eingabeelement nicht.


Bestimmen, ob ein Kontrollkästchen oder ein Optionsfeld ausgewählt oder gelöscht ist

Mit Hilfe von können wir feststellen, ob ein Kontrollkästchen oder ein Optionsfeld ausgewählt oder gelöscht wird : geprüft Formularfilter. Untersuchen Sie den nachstehenden Code für mehrere Verwendungen des : geprüft Filter.

         

So stellen Sie fest, ob ein Formularelement ausgeblendet ist

Mit dem können Sie feststellen, ob ein Formularelement ausgeblendet ist :versteckt Formularfilter. Untersuchen Sie den nachstehenden Code für mehrere Verwendungen des : geprüft Filter.

        

Den Wert eines Eingabeelements einstellen / abrufen

Das val () Diese Methode kann verwendet werden, um den Attributwert eines Eingabeelements festzulegen und abzurufen (Schaltfläche, Kontrollkästchen, ausgeblendet, Bild, Kennwort, Radio, Zurücksetzen, Senden, Text). Unten stelle ich den Wert für jede Eingabe in ein val () und alarmieren Sie den Wert dann mit val () Methode.

                

Einstellen / Abrufen der ausgewählten Option eines Auswahlelements

Verwendung der val () Methode können Sie den ausgewählten Wert von a einstellen Element verwenden Sie die val () erneut, um festzustellen, welche Option ausgewählt ist. Das val () Die Methode in diesem Szenario gibt den Attributwert der ausgewählten Option zurück.

        

Einstellen / Abrufen ausgewählter Optionen eines Multi-Select-Elements

Verwendung der val () Methode können wir die ausgewählten Werte eines Multi-Select-Elements durch Übergeben von festlegen val () Methode ein Array, das die entsprechenden Werte enthält.

Um die ausgewählten Optionen in einem Multi-Select-Element abzurufen, verwenden wir erneut die val () Methode, um ein Array der ausgewählten Optionen abzurufen. Das Array enthält die Wertattribute der ausgewählten Optionen.

        

Festlegen / Abrufen von Text in einem

Festlegen / Abrufen des Wertattributs eines Schaltflächenelements

Sie können das Wertattribut eines Schaltflächenelements festlegen, indem Sie das übergeben val () Methode eine Textzeichenfolge. Um den Wert eines Schaltflächenelements abzurufen, verwenden Sie die val () Methode erneut, um den Text abzurufen.

        

Auswahlelemente bearbeiten

jQuery macht einige der üblichen Aufgaben, die mit der Bearbeitung von Auswahlelementen verbunden sind, trivial. Im Folgenden sind einige dieser Aufgaben mit codierten Beispielen aufgeführt.

 // Hinzufügen von Optionen zu einem select-Element am Ende $ ('select'). Append (''); // Optionen am Anfang eines select-Elements hinzufügen $ ('select'). Prepend (''); // Ersetze alle Optionen durch neue Optionen $ ('select'). Html (''); // Ersetzen Sie Elemente an einem bestimmten Index mithilfe des Auswahlfilters: eq (), um // das Element auszuwählen, und ersetzen Sie es dann mit der .replaceWith () - Methode $ ('select option: eq (1)'). ReplaceWith (''); // Setzen Sie die ausgewählte Option für Elemente auswählen auf 2 $ ('Auswahloption: eq (2)'). Attr ('selected', 'selected'); // Entferne die letzte Option aus einem select-Element $ ('select option: last'). Remove (); // Wählen Sie eine Option aus einem select-Element über seine // Reihenfolge im Wrapper-Set mithilfe benutzerdefinierter Filter aus. $ ('# Select option: first'); $ ('# select option: last'); $ ('# select option: eq (3)'); $ ('# select option: gt (5)'); $ ('# select option: lt (3)'); $ ('# select option: nicht (: ausgewählt)'); // Holen Sie sich den Text der ausgewählten Option (en). Dies gibt den Text von // allen Optionen zurück, die ausgewählt werden, wenn Sie ein Mehrfachauswahlelement verwenden. $ ('Select option: selected'). Text (); // Abrufen des Wertattributwerts einer Option in einem select-Element $ ('select option: last'). Val (); // Abrufen des: letzten Optionselements // Abrufen des Index (0-Index) der ausgewählten Option. // Hinweis: Funktioniert nicht mit Elementen mit Mehrfachauswahl. $ ('select option'). index ($ ('select option: selected')); // Eine Option hinter einer bestimmten Position einfügen $ ('select option: eq (1)'). After (''); // Eine Option vor einer bestimmten Position einfügen $ ('select option: eq (3)'). Before ('');

Formularelemente nach Typ auswählen

Es ist möglich, Formularelemente nach ihrem Typ auszuwählen, z. $ ('Eingabe: Ankreuzfeld'). jQuery bietet die folgenden Formattypfilter zum Auswählen von Formularelementen nach ihrem Typ.

  • :Text
  • :Passwort
  • :Radio
  • : Ankreuzfeld
  • :einreichen
  • :Bild
  • : zurücksetzen
  • :Datei
  • :Taste

Alle Formularelemente auswählen

Sie können alle Formularelemente mit Hilfe von auswählen :Eingang Formularfilter. Dieser Filter wählt mehr als nur Eingabeelemente aus, er wählt beliebige aus