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
Hier verwenden wir JQuery und JavaScript, um den Wert des ausgewählten Kontrollkästchens im
-Element von
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.
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.
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!
