Heim > Artikel > Web-Frontend > Wie verwende ich Kontrollkästchen in ausgewählten Optionen mithilfe von JavaScript?

Wie verwende ich Kontrollkästchen in ausgewählten Optionen mithilfe von JavaScript?

PHPznach vorne: 2023-08-29 22:41:091305Durchsuche

如何使用 JavaScript 在选择选项中使用复选框？

Manchmal müssen wir Kontrollkästchen in ausgewählten Optionen verwenden. Wir können Benutzern die Auswahl mehrerer Optionen ermöglichen, indem wir Kontrollkästchen mit Auswahloptionen einführen. Wenn wir jedoch mehrere Attribute des -Menü einführen, um die Benutzererfahrung zu verbessern.

Hier verwenden wir JQuery und JavaScript, um den Wert des ausgewählten Kontrollkästchens im

Benutzerdefiniertes Auswahlmenü erstellen

Das

-Element von

Grammatik

Benutzer können JavaScript verwenden, um die Kontrollkästchen benutzerdefinierter Dropdown-Menüs gemäß der folgenden Syntax zu verwalten.

function showOptions() {
   if (showCheckBoxes) {
      // show options div
      showCheckBoxes = false;
   } else {
      // hide options div
      showCheckBoxes = true;
   }
}

function getOptions() {
   // selectedOptions is an array containing all checked checkboxes      
   var selectedOptions = document.querySelectorAll('input[type=checkbox]:checked')
}

In der obigen Syntax zeigen wir die Optionen des benutzerdefinierten Dropdowns basierend auf dem Wert der Variablen showCheckBoxes. Darüber hinaus können wir das Array selectedOptions durchlaufen, um alle ausgewählten Kontrollkästchen einzeln abzurufen.

Schritte

Schritt 1 – Erstellen Sie ein Div, das den Menütext enthält.
Schritt 2 – Verwenden Sie nun benutzerdefiniertes HTML und den Eingabetyp „Kontrollkästchen“ für Optionen.
Schritt 3 – OnClick-Ereignis für das div-Element hinzufügen. Wenn der Benutzer auf das Div klickt, sollte das Menü showOptions() aufgerufen werden.
Schritt 4 – Deklarieren Sie in JavaScript die Variable showCheckBoxes und initialisieren Sie sie mit einem echten booleschen Wert. Wir zeigen die Optionen des benutzerdefinierten Dropdowns basierend auf der Variablen showCheckBoxes an.
Schritt 5 – Immer wenn der Benutzer auf das Dropdown-Div-Element klickt, ändern Sie die Anzeige des Options-Div basierend auf dem Wert der Variablen showCheckBoxes.
Schritt 6 – Definieren Sie nun eine getOptions()-Funktion. Greifen Sie in der Funktion getOptions() auf alle ausgewählten Kontrollkästchen zu und drucken Sie die Werte aller ausgewählten Kontrollkästchen aus, indem Sie mithilfe einer for-Schleife über das Array selectedOptions iterieren.

Beispiel 1

Im folgenden Beispiel haben wir ein benutzerdefiniertes Auswahlmenü erstellt, wie im obigen Algorithmus erläutert. Benutzer können mehrere Optionen auswählen, indem sie mehrere Kontrollkästchen aktivieren.

Wenn der Benutzer außerdem auf die Schaltfläche „Ausgewählte Kontrollkästchen abrufen“ klickt, ruft er die Funktion getOptions() auf und gibt die Werte aller ausgewählten Kontrollkästchen aus, sodass wir alle ausgewählten Optionen des Auswahlmenüs abrufen können.

<html>
<head>
   <style>
      .dropdown {
         width: 12rem;
         height: 1.5rem;
         font-size: 1.3rem;
         padding: 0.6 0.5rem;
         background-color: aqua;
         cursor: pointer;
         border-radius: 10px;
         border: 2px solid yellow;
      }
      #options {
         margin: 0.5rem 0;
         width: 12rem;
         background-color: lightgrey;
         display: none;
         flex-direction: column;
         border-radius: 12px;
      }
      label {
         padding: 0.2rem;
      }
      label:hover {
         background-color: aqua;
      }
      button {
         font-size: 1rem;
         border-radius: 10px;
         padding: 0.5rem;
         background-color: yellow;
         border: 2px solid green;
         margin: 1rem 0;
      }
   </style>
</head>
<body>
   <h2>Creating the custom dropdown menu to use <i>Checkboxes</i> as an option.
   </h2>
   <div class = "dropdown" onclick = "showOptions()">
      show all options
   </div>
   <div id = "options">
      <label for = "one">
         <input type = "checkbox" id = "one" value = "First Option" />
            First Option
      </label>
      <label for = "two">
         <input type = "checkbox" id = "two" value = "Second Option" />
            Second Option
      </label>
      <label for = "three">
         <input type = "checkbox" id = "three" value = "Third Option" />
            Third Option
      </label>
      <label for = "four">
         <input type = "checkbox" id = "four" value = "Fourth Option" />
            Fourth Option
      </label>
      <label for = "five">
         <input type = "checkbox" id = "five" value = "Fifth Option" />
            Fifth Option
      </label>
   </div>
   <div id = "output"> </div>
   <button onclick = "getOptions()"> Get all Selected Checkboxes </button>
   <script>
      let output = document.getElementById('output');
      var showCheckBoxes = true;

      function showOptions() {
         var options =
            document.getElementById("options");

         if (showCheckBoxes) {
            options.style.display = "flex";
            showCheckBoxes = !showCheckBoxes;
         } else {
            options.style.display = "none";
            showCheckBoxes = !showCheckBoxes;
         }
      }
      function getOptions() {
         var selectedOptions = document.querySelectorAll('input[type=checkbox]:checked')
         output.innerHTML = "The selected options are given below. <br/>";
         for (var i = 0; i < selectedOptions.length; i++) {
            output.innerHTML += selectedOptions[i].value + " , ";
            console.log(selectedOptions[i])
         }
      }
   </script>
</body>
</html>

In diesem Tutorial haben Benutzer gelernt, wie sie mit HTML, CSS und JavaScript ein benutzerdefiniertes Auswahlmenü erstellen. Darüber hinaus können Benutzer mithilfe einiger CSS-Bibliotheken wie Bootstrap Auswahlmenüs mit Kontrollkästchen erstellen.

Das obige ist der detaillierte Inhalt vonWie verwende ich Kontrollkästchen in ausgewählten Optionen mithilfe von JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery css bootstrap html for 循环事件算法

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie unterscheidet sich die Promise.any()-Methode von der Promise.race()-Methode in JavaScript?Nächster Artikel：Wie unterscheidet sich die Promise.any()-Methode von der Promise.race()-Methode in JavaScript?

In Verbindung stehende Artikel

Mehr sehen