Javascript-Mehrfachauswahlfeld, um mehrere auszuwählen

JavaScript ist eine weit verbreitete Skriptsprache, mit der interaktive Webseiten und Anwendungen erstellt werden können. Unter diesen ist das Mehrfachauswahlfeld ein häufig verwendetes Formularelement in der Webentwicklung, das es dem Benutzer ermöglicht, eine oder mehrere Optionen auszuwählen. In diesem Artikel erfahren Sie, wie Sie mithilfe von JavaScript mehrere Kontrollkästchen aktivieren.

1. Grundlegende Verwendung der HTML-Mehrfachauswahlbox

Um eine Mehrfachauswahlbox in HTML zu definieren, müssen Sie das Tag verwenden und die entsprechenden Attributwerte festlegen: Name, Wert und überprüft. Unter anderem wird das Namensattribut verwendet, um den Namen des Mehrfachauswahlfelds zu definieren. Das Wertattribut wird verwendet, um den Wert der Option anzugeben.

Zum Beispiel erstellt der folgende Code ein Mehrfachauswahlfeld mit dem Namen „Früchte“, das drei Optionen enthält: Äpfel, Bananen und Orangen, wobei Apfel das standardmäßig ausgewählte Element ist.

<form>
  <input type="checkbox" name="fruits" value="apple" checked>苹果<br>
  <input type="checkbox" name="fruits" value="banana">香蕉<br>
  <input type="checkbox" name="fruits" value="orange">橙子
</form>

Benutzer können Optionen aktivieren oder deaktivieren, indem sie auf das Kontrollkästchen klicken. Wenn der Benutzer das Formular absendet, werden die ausgewählten Optionen als Formulardaten an den Server übermittelt.

2. JavaScript implementiert mehrere Auswahlfelder, um mehrere auszuwählen.

Obwohl die von HTML bereitgestellte Funktion für mehrere Auswahlfelder sehr praktisch ist, müssen wir manchmal die ausgewählten Optionen auf dem Client bedienen, z. B. um die Anzahl der Auswahlen abzurufen oder die zu verarbeiten Auswahlmöglichkeiten in einer Schleife. Zu diesem Zeitpunkt können wir JavaScript verwenden, um die Anzahl der ausgewählten Mehrfachauswahlfelder abzurufen.

1. Ermitteln Sie die Anzahl der ausgewählten Mehrfachauswahlfelder.

Um die Anzahl der ausgewählten Mehrfachauswahlfelder zu ermitteln, können wir die Methode document.querySelectorAll() verwenden, um alle ausgewählten Mehrfachauswahlfeldelemente abzurufen und deren Anzahl zu zählen. Diese Methode gibt eine Liste aller Elemente zurück, die dem angegebenen CSS-Selektor entsprechen. Der folgende Code ruft beispielsweise die Anzahl der ausgewählten Elemente im Mehrfachauswahlfeld mit dem Namen „Früchte“ ab:

const checkboxes = document.querySelectorAll('input[name="fruits"]:checked');
const checkedCount = checkboxes.length;
console.log(`选中了 ${checkedCount} 个选项。`);

In diesem Code ruft die erste Zeile zunächst alle Elemente im Mehrfachauswahlfeld mit dem Namen „Früchte“ ab Mit der Methode document.querySelectorAll() werden Elemente ausgewählt und in einem NodeList-Objekt gespeichert. Beachten Sie, dass der CSS-Selektor „input[name="fruits"]:checked“ verwendet wird, um ausgewählte Kontrollkästchenelemente abzugleichen. Unter diesen gibt das Namensattribut den Namen des auszuwählenden Mehrfachauswahlfelds an, und die Pseudoklasse :checked kann zum Auswählen des ausgewählten Elements verwendet werden.

Die zweite Zeile berechnet die Anzahl der ausgewählten Kontrollkästchen über checkboxes.length. Verwenden Sie abschließend die Methode console.log(), um die Ergebnisse auszugeben.

2. Verarbeiten des ausgewählten Mehrfachauswahlfelds

Um das ausgewählte Mehrfachauswahlfeld zu verarbeiten, können wir einen ähnlichen Code wie oben verwenden, um das ausgewählte Mehrfachauswahlfeldelement abzurufen, und dann jedes ausgewählte Element mit einer Schleife durchlaufen . Die die entsprechenden Operationen ausführt.

Zum Beispiel durchläuft der folgende Code die ausgewählten Elemente im Mehrfachauswahlfeld und fügt deren Werte zu einer Zeichenfolge hinzu:

const checkboxes = document.querySelectorAll('input[name="fruits"]:checked');
let values = '';
checkboxes.forEach(checkbox => {
  values += checkbox.value + ',';
});
console.log(`选中的选项是：${values}`);

Der Code ruft zuerst die Liste der ausgewählten Mehrfachauswahlfeldelemente ab und verwendet dann die forEach()-Methode, um sie für jedes ausgewählte Element zu durchlaufen. Fügen Sie im Schleifenkörper den Wert des aktuellen Elements zur Variablen „values“ hinzu und geben Sie das Ergebnis am Ende aus.

3. Zusammenfassung

In diesem Artikel haben wir die grundlegende Verwendung von HTML-Mehrfachauswahlfeldern vorgestellt und JavaScript verwendet, um die Funktion zum Auswählen mehrerer Mehrfachauswahlfelder zu implementieren. Indem wir die Anzahl der ausgewählten Multi-Select-Boxen ermitteln und die ausgewählten Multi-Select-Box-Elemente verarbeiten, erweitern wir die Funktionalität der Multi-Select-Box und bieten eine Grundlage für die Implementierung komplexer Formularinteraktionen. Ich hoffe, dieser Artikel wird Webentwicklern helfen, JavaScript zu erlernen und zu verwenden, um mit Mehrfachauswahlfeldern umzugehen.

Das obige ist der detaillierte Inhalt vonJavascript-Mehrfachauswahlfeld, um mehrere auszuwählen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!