Wie erstelle ich ein Kontrollkästchen „Alle auswählen', das andere Kontrollkästchen steuert?

So implementieren Sie ein Kontrollkästchen, das alle anderen Kontrollkästchen auswählt

Durch die Implementierung eines Kontrollkästchens „Alle auswählen“ in HTML können Sie die Auswahl einfach umschalten Status mehrerer anderer Kontrollkästchen auf der Seite.

Lösung:

Um diese Funktionalität zu erreichen:

1. Erstellen Sie ein Skript-Tag mit dem folgenden JavaScript-Code:

<script>
function toggle(source) {
  const checkboxes = document.getElementsByName('foo');
  for (let i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = source.checked;
  }
}
</script>

2. Fügen Sie in Ihrem HTML-Dokument den folgenden Code hinzu, um ein „Alles auswählen“ zu erstellen. Kontrollkästchen:

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br />

3. Fügen Sie den folgenden Code für Ihre einzelnen Kontrollkästchen hinzu:

<input type="checkbox" name="foo" value="bar1"> Bar 1<br />
<input type="checkbox" name="foo" value="bar2"> Bar 2<br />
<input type="checkbox" name="foo" value="bar3"> Bar 3<br />
<input type="checkbox" name="foo" value="bar4"> Bar 4<br />

Wenn Sie auf das Kontrollkästchen „Alle auswählen“ klicken, wird das Skript durchläuft alle Kontrollkästchen mit dem Namen „foo“ und setzt ihre aktivierte Eigenschaft so, dass sie mit dem aktivierten Status des Kontrollkästchens „Alle auswählen“ übereinstimmt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Kontrollkästchen „Alle auswählen', das andere Kontrollkästchen steuert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!