Wie erstelle ich ein Kontrollkästchen „Alle auswählen' in HTML?

So wählen Sie alle Kontrollkästchen mit einem einzigen Kontrollkästchen „Alle auswählen“ in HTML aus

Erstellen eines Kontrollkästchens „Alle auswählen“ in einer HTML-Seite ermöglicht die bequeme Auswahl mehrerer Kontrollkästchen mit einem einzigen Klick. Durch die Implementierung dieser Funktionalität können Sie die Benutzererfahrung verbessern und die Formularübermittlung optimieren.

Um ein Kontrollkästchen „Alle auswählen“ zu implementieren, können Sie JavaScript verwenden, um die aktivierte Eigenschaft aller anderen Kontrollkästchen zu bearbeiten:

<script type="text/javascript">
  function toggleAll(source) {
    var checkboxes = document.querySelectorAll('input[type="checkbox"][name="foo"]');
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].checked = source.checked;
    }
  }
</script>

In diesem Skript ist die Funktion toggleAll() definiert, um den aktivierten Status aller Kontrollkästchen mit dem Namen „foo“ umzuschalten, wann immer das Quell-Kontrollkästchen (das Kontrollkästchen „Alle auswählen“) aktiviert ist angeklickt.

Um dieses Skript zu verwenden, fügen Sie einfach das folgende Kontrollkästchen zu Ihrem HTML hinzu:

<input type="checkbox" onclick="toggleAll(this)" /> Select All

Nach der Integration wird durch Klicken auf das Kontrollkästchen „Alle auswählen“ der aktivierte Status aller anderen Kontrollkästchen umgeschaltet Kontrollkästchen auf der Seite mit dem Namen „foo“. Dies bietet Benutzern eine bequeme Möglichkeit, schnell und einfach alle Elemente in einem Formular auszuwählen.

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