我們將學(xué)習(xí)如何實(shí)現(xiàn)多輸入復(fù)選框。復(fù)選框輸入選擇器將具有以下功能 –
可以使用復(fù)選框選擇多個(gè)選項(xiàng)。
所選選項(xiàng)將顯示為單獨(dú)的列表。
每個(gè)選定的選項(xiàng)都會提供刪除圖標(biāo)，以取消選中/刪除該選項(xiàng)。
另一件事需要注意的是，我們不會使用任何第三方庫來實(shí)現(xiàn)這些功能，所有內(nèi)容都將僅用 HTML + JavaScript + CSS 編寫。
方法
我們將有一個(gè)對象，其鍵將用作復(fù)選框輸入的標(biāo)簽，值（true/false）將用作選中的屬性。
然后我們將渲染該對象的每個(gè)鍵。
每當(dāng)任何選項(xiàng)的狀態(tài)發(fā)生變化時(shí)，我們都會重新呈現(xiàn)列表。
同樣，單擊刪除圖標(biāo)后，我們將更新選項(xiàng)并重新呈現(xiàn)列表。
示例
因此，讓我們看一下相同的代碼 –
<!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>
登錄后復(fù)制
說明
上面的代碼創(chuàng)建了一個(gè)顯示一組復(fù)選框的網(wǎng)頁。
每個(gè)都有不同的顏色標(biāo)簽（紅色、綠色、黃色等）。
選中復(fù)選框后，頁面頂部的“holder”div 中會顯示相應(yīng)的顏色標(biāo)簽。
標(biāo)簽還會顯示一個(gè)“x”，單擊該“x”時(shí)，會取消選擇復(fù)選框并從“holder”div 中刪除標(biāo)簽。
代碼使用 JavaScript 來操作 DOM 并處理復(fù)選框選擇和取消選擇。
以上就是如何在普通 JavaScript 中實(shí)現(xiàn)多輸入復(fù)選框？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
