Heim > Web-Frontend > js-Tutorial > Wie erstelle ich ein Kontrollkästchen „Alle auswählen' in HTML?

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

DDD
Freigeben: 2024-11-17 14:46:02
Original
286 Leute haben es durchsucht

How to Create a

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>
Nach dem Login kopieren

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 dem Login kopieren

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage