So legen Sie den ausgewählten Wert der Mehrfachauswahl mithilfe von JQuery fest

Die Mehrfachauswahlfunktion in JQuery ist sehr verbreitet, und das Festlegen des ausgewählten Werts ist auch Teil der JQuery-Mehrfachauswahloperation. Durch die Verwendung von JQuery zum Festlegen des ausgewählten Werts können Vorgänge schnell implementiert, der Benutzerkomfort verbessert und verschiedene komplexe Funktionsanforderungen aktiviert werden.

In diesem Artikel wird erläutert, wie Sie JQuery verwenden, um den ausgewählten Wert der Mehrfachauswahl festzulegen, und Beispiele zum besseren Verständnis verwenden.

1. Grundfunktionen der JQuery-Mehrfachauswahl

Bevor Sie mit der Einführung des Festlegens des ausgewählten Werts beginnen, müssen Sie die Grundfunktionen der JQuery-Mehrfachauswahl verstehen.

1. Den ausgewählten Wert abrufen

Das Abrufen des ausgewählten Werts des Mehrfachauswahlfelds in JQuery ist sehr einfach und kann schnell erreicht werden, indem einfach die val()-Methode verwendet wird. Zum Beispiel:

var selectVal = $('input[type=checkbox]:checked').val();

Der obige Code wählt die ausgewählte Option des Typs „Kontrollkästchen“ aus, ruft dann den ausgewählten Wert ab und speichert ihn in der Variablen „selectVal“.

2. Legen Sie den ausgewählten Status fest.

Wenn Sie den ausgewählten Status mehrerer Optionen festlegen müssen, verwenden Sie einfach die Methode prop() oder attr(). Zum Beispiel:

$('input[type=checkbox]').attr('checked', true);

Die obige Codezeile setzt alle Optionen vom Typ „Kontrollkästchen“ auf „Ausgewählt“.

3. Die ausgewählte Zahl abrufen

Das Abrufen der ausgewählten Zahl ist ebenfalls sehr einfach. Verwenden Sie einfach die Länge des ausgewählten Elementarrays, zum Beispiel:

var count = $('input[type=checkbox]:checked').length;

2. So stellen Sie den ausgewählten Wert ein

Nachdem Sie die grundlegenden Multis verstanden haben -Auswahlvorgang. Als Nächstes stellen wir vor, wie Sie den ausgewählten Wert mehrerer Optionen festlegen.

1. Legen Sie den ausgewählten Wert mehrerer Auswahlen fest

Um den ausgewählten Wert mehrerer Auswahlen festzulegen, müssen Sie zunächst den Inhalt und den Optionswert des ausgewählten Elements bestimmen. Beispiel:

<input type="checkbox" name="color" value="red">红色
<input type="checkbox" name="color" value="yellow">黄色
<input type="checkbox" name="color" value="blue">蓝色

Im obigen Code sind die Optionen, deren Namensattribut Farbe ist, mehrere Optionen, und der entsprechende Wert jedes Elements ist Rot, Gelb bzw. Blau.

Es ist auch sehr einfach, den geprüften Status einer Option über JQuery festzulegen. Sie müssen lediglich das geprüfte Attribut der entsprechenden Option auf true setzen. Zum Beispiel:

$('input[name=color][value=red]').prop('checked', true);

Der obige Code setzt die Option, deren Namensattribut Farbe und Wert Rot ist, auf den ausgewählten Status.

2. Den ausgewählten Wert mehrerer Auswahlen abrufen

Um den ausgewählten Wert mehrerer Auswahlen zu erhalten, müssen Sie die ausgewählten Optionen innerhalb der gesamten Mehrfachauswahlgruppe herausfiltern und die Wertwerte dieser Optionen als Ergebnis verwenden und fügen Sie sie einem Array hinzu. Beispiel:

var selected = [];
$('input[name=color]:checked').each(function() {
  selected.push($(this).val());
});

Der obige Code durchläuft die ausgewählten Optionen, deren Namensattribut Farbe ist, und fügt den Wert jeder Option dem ausgewählten Array hinzu.

3. Praktischer Fall

Das häufigste Szenario für die Verwendung von JQuery zum Festlegen des ausgewählten Werts mehrerer Optionen ist die Formularoperation. Im Folgenden finden Sie einen praktischen Fall, damit jeder das erlernte Wissen besser anwenden kann.

1. HTML-Code

<form>
  <label><input type="checkbox" name="hobby" value="swim">游泳</label>
  <label><input type="checkbox" name="hobby" value="run">跑步</label>
  <label><input type="checkbox" name="hobby" value="basketball">篮球</label>
  <label><input type="checkbox" name="hobby" value="football">足球</label>
  <label><input type="checkbox" name="hobby" value="tennis">网球</label>
  <label><input type="checkbox" name="hobby" value="badminton">羽毛球</label>
</form>

2. Legen Sie den ausgewählten Wert fest und erhalten Sie den ausgewählten Wert. Der obige Code setzt das Namensattribut auf Hobby, den auszuführenden Wert und die Fußballoptionen und speichert alle ausgewählten Werte ein Array.

4. Zusammenfassung

Das Obige ist eine Einführung in das Festlegen des ausgewählten Werts von Mehrfachauswahloptionen in JQuery. Anhand der Beispiele in diesem Artikel können Leser die grundlegenden Vorgänge der JQuery-Mehrfachauswahl und das Festlegen des ausgewählten Werts mehrerer Optionen besser verstehen. Als hervorragendes JavaScript-Framework machen die leistungsstarken Operationen und die praktische Syntax von JQuery die Webentwicklung effizienter.

Das obige ist der detaillierte Inhalt vonSo legen Sie den ausgewählten Wert der Mehrfachauswahl mithilfe von JQuery fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!