如何在vanilla JavaScript中实现多个输入复选框
我们将学习如何实现多个输入复选框。The checkbox input selector will have the following functionalities −
- 使用复选框可以选择多个选项。
-
所选的选项将被显示为一个单独的列表。
-
删除图标将被提供给每个选择的选项,以取消/删除该选项。
另外需要注意的是,我们不会使用任何第三方库来实现这些功能,一切都将只用HTML + JavaScript + CSS编写。
方法
- 我们将有一个对象,它的键将被用作复选框输入的标签,值(真/假)将被用作复选属性。
-
然后我们将渲染该对象的每个键。
-
每当任何选项的状态发生变化时,我们将重新渲染该列表。
-
同样地,当点击删除图标时,我们将更新选项并重新渲染列表。
例子
因此,让我们来看看同样的代码:
<!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>
解释说明
-
上面的代码创建了一个网页,显示一组复选框。
-
每个都有不同的颜色标签(红色、绿色、黄色等)。
-
当一个复选框被选中时,相应的颜色标签会显示在页面顶部的 “持有人 “div中。
-
标签上还会出现一个 “x”,当点击时,就会取消对复选框的选择,并将标签从 “持有人 “div中移除。
-
代码使用JavaScript来操作DOM并处理复选框的选择和取消选择。