如何在普通 JavaScript 中实现多输入复选框？.docx
第
如何在普通JavaScript中实现多输入复选框？
我们将有一个对象，其键将用作复选框输入的标签，值（true/false）将用作选中的属性。
然后我们将渲染该对象的每个键。
每当任何选项的状态发生变化时，我们都会重新呈现列表。
同样，单击删除图标后，我们将更新选项并重新呈现列表。
因此，让我们看一下相同的代码-
!DOCTYPEhtml
html
head
titleMultipleinputCheckbox/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:15px0;
.item{
margin:0;
margin-right:5px;
padding:0;
.itemHolder{
display:flex;
margin-right:20px;
flex-direction:row;
align-items:center;
padding:5px10px;
border:1pxsolid#aaa;
/style
/head
body
divid=holder/div
divid=box/div
/body
script
constoptions={
Red:false,
Green:false,
Yellow:false,
Orange:false,
Blue:false,
Black:false,
Cyan:false,
Magenta:false,
Pink:false
constrenderOptions=()={
constholder=document.getElementById(holder
holder.innerHTML=
for(constkeyofObject.keys(options)){
if(options[key]){
constcancelIcon=document.createElement(span
cancelIcon.innerText=x
cancelIcon.style.cursor=pointer
cancelIcon.onclick=()=handleClick(key);
constitem=document.createElement(div
constelement=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);
consthandleClick=(label)={
options[label]=!options[label];
renderCheckbox();
renderOptions();
constrenderCheckbox=()={
constbox=document.getElementById(box
box.innerHTML=
for(constkeyofObject.keys(options)){
constdivison=document.createElement(