Heim > Artikel > Web-Frontend > Wie implementiert man ein Kontrollkästchen mit mehreren Eingaben in einfachem JavaScript?
Wie implementiert man ein Kontrollkästchen mit mehreren Eingaben in einfachem JavaScript?
- WBOYnach vorne
- 2023-09-07 20:53:02897Durchsuche
Wir lernen, wie man ein Kontrollkästchen mit mehreren Eingaben implementiert. Der Kontrollkästchen-Eingabeselektor verfügt über die folgende Funktionalität:
Mehrere Optionen können über Kontrollkästchen ausgewählt werden.
Die ausgewählten Optionen werden als separate Liste angezeigt.
Jede ausgewählte Option bietet ein Löschsymbol zum Deaktivieren/Löschen dieser Option.
Außerdem ist zu beachten, dass wir zur Implementierung dieser Funktionen keine Bibliotheken von Drittanbietern verwenden werden, sondern alles nur in HTML + JavaScript + CSS geschrieben wird.
Methode
Wir werden ein Objekt haben, dessen Schlüssel als Beschriftung für die Kontrollkästcheneingabe verwendet wird und dessen Wert (wahr/falsch) als überprüftes Attribut verwendet wird.
Wir rendern dann jeden Schlüssel des Objekts.
Wir werden die Liste jedes Mal neu rendern, wenn sich der Status einer Option ändert.
In ähnlicher Weise aktualisieren wir nach dem Klicken auf das Löschsymbol die Optionen und rendern die Liste neu.
Beispiel
Schauen wir uns also denselben Code an -
<!DOCTYPE html>
<html>
<head>
<title>Multiple input Checkbox</title>
<style>
#holder {
background: #ddd;
min-height: 35px;
border-radius: 5px;
padding: 5px;
overflow-y: scroll;
display: flex;
align-items: center;
flex-direction: row;
}
#box {
display: flex;
flex-direction: column;
}
.divison {
margin: 15px 0;
}
.item {
margin: 0;
margin-right: 5px;
padding: 0;
}
.itemHolder {
display: flex;
margin-right: 20px;
flex-direction: row;
align-items: center;
padding: 5px 10px;
border: 1px solid #aaa;
}
</style>
</head>
<body>
<div id='holder'></div>
<div id='box'></div>
</body>
<script>
const options = {
'Red': false,
'Green': false,
'Yellow': false,
'Orange': false,
'Blue': false,
'Black': false,
'Cyan': false,
'Magenta': false,
'Pink': false
};
const renderOptions = () => {
const holder = document.getElementById('holder');
holder.innerHTML = '';
for (const key of Object.keys(options)) {
if (options[key]) {
const cancelIcon = document.createElement('span');
cancelIcon.innerText = 'x';
cancelIcon.style.cursor = 'pointer';
cancelIcon.onclick = () => handleClick(key);
const item = document.createElement('div');
const element = document.createElement('p');
element.innerText = key;
element.style.color = key.toLowerCase();
element.classList.add('item');
item.appendChild(element);
item.appendChild(cancelIcon);
item.classList.add('itemHolder');
holder.appendChild(item);
}
}
};
const handleClick = (label) => {
options[label] = !options[label];
renderCheckbox();
renderOptions();
};
const renderCheckbox = () => {
const box = document.getElementById('box');
box.innerHTML = '';
for (const key of Object.keys(options)) {
const divison = document.createElement('div');
const input = document.createElement('input');
const label = document.createElement('label');
divison.classList.add('divison');
input.id = key;
label.innerText = key;
label.for = key;
input.type = 'checkbox';
input.value = key;
input.checked = options[key];
input.onchange = () => handleClick(key);
divison.appendChild(input);
divison.appendChild(label);
box.appendChild(divison);
}
};
renderCheckbox();
</script>
</html>
Anleitung
Der obige Code erstellt eine Webseite, die eine Reihe von Kontrollkästchen anzeigt.
Jedes hat ein anderes Farbetikett (rot, grün, gelb usw.).
Wenn das Kontrollkästchen aktiviert ist, wird die entsprechende Farbbeschriftung im Div „Halter“ oben auf der Seite angezeigt.
Das Etikett zeigt auch ein „x“ an, das beim Klicken das Kontrollkästchen deaktiviert und das Etikett aus dem Div „Halter“ entfernt.
Der Code verwendet JavaScript, um das DOM zu manipulieren und die Auswahl und Aufhebung von Kontrollkästchen zu verwalten.
Das obige ist der detaillierte Inhalt vonWie implementiert man ein Kontrollkästchen mit mehreren Eingaben in einfachem JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!