Wie implementiert man ein Kontrollkästchen „Alle auswählen' in HTML?

Implementieren eines Kontrollkästchens „Alle auswählen“ in HTML

Bei der Webentwicklung kommt es häufig vor, dass Benutzer mehrere Elemente auswählen müssen aus einer Liste. Eine vielseitige Lösung zur Vereinfachung dieses Prozesses ist die Implementierung eines Kontrollkästchens „Alle auswählen“. Wenn dieses Kontrollkästchen aktiviert ist, sollten automatisch alle anderen Kontrollkästchen auf der Seite ausgewählt werden.

JavaScript-Lösung

Um diese Funktionalität zu erreichen, können Sie JavaScript verwenden. Hier ist ein Codeausschnitt, der die Implementierung demonstriert:

function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for (var i = 0, n = checkboxes.length; i < n; i++) {
    checkboxes[i].checked = source.checked;
  }
}

HTML-Integration

Integrieren Sie die JavaScript-Funktion wie folgt in Ihren HTML-Code:

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

<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 />

Funktionsverhalten

Wenn die Schaltfläche „Toggle Wenn das Kontrollkästchen „Alle“ aktiviert ist, werden alle anderen Kontrollkästchen aktiviert. Wenn Sie es deaktivieren, werden alle anderen Kontrollkästchen deaktiviert. Dadurch können Benutzer mit nur einem Klick schnell mehrere Elemente auswählen oder die Auswahl aufheben.

Das obige ist der detaillierte Inhalt vonWie implementiert man ein Kontrollkästchen „Alle auswählen' in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!