Javascript 如何以标记输入的形式编写复选框
我有一些带有名称的复选框，如果我选中该复选框，我希望带有交叉符号的标记输入应显示为带有交叉符号，如果我单击该交叉符号，该复选框应自动取消选中。Javascript 如何以标记输入的形式编写复选框,javascript,html,css,Javascript,Html,Css,我有一些带有名称的复选框，如果我选中该复选框，我希望带有交叉符号的标记输入应显示为带有交叉符号，如果我单击该交叉符号，该复选框应自动取消选中。 请帮忙。现在就试试吧 <html> <head> <title>title</title> <style> *{font-family:sans-serif} body{margin:60px} #filter{height:100px}
请帮忙。现在就试试吧
<html>
<head>
<title>title</title>
<style>
*{font-family:sans-serif}
body{margin:60px}
#filter{height:100px}
label{cursor:pointer}
</style>
</head>
<body>
<div id="filter">
<h2>Filter</h2>
<hr>
<div id="filterContent">
</div>
</div>
<div id="root">
<label>
<input type="checkbox">
<span>Red</span>
</label>
<label>
<input type="checkbox">
<span>blue</span>
</label>
<label>
<input type="checkbox">
<span>Yellow</span>
</label>
</div>
</body>
<script>
var checkboxes=document.getElementById('root').children;
var filterContent=document.getElementById('filterContent');
var filterChildren=filterContent.children;
for(i=0;i<checkboxes.length;i++){
checkboxes[i].children[0].addEventListener('click',function(){
if(this.checked && this.getAttribute('type')=='checkbox'){
var span=document.createElement('span');
span.setAttribute('onclick','setCheck(this)')
span.innerHTML='X '+'<span>'+this.parentElement.children[1].innerHTML+'</span>';
span.style.cursor='pointer';
span.style.color='#484646';
span.style.background="#e2e2e2";
span.style.padding='6px 12px'
span.style.borderRadius='5px';
span.style.marginLeft='10px';
filterContent.appendChild(span);
}
else{
for(i=0;i<filterChildren.length;i++){
if(filterChildren[i].children[0].innerHTML==this.parentElement.children[1].innerHTML){
filterContent.removeChild(filterChildren[i]);
}
}
}
})
}
function setCheck(index){
for(i=0;i<checkboxes.length;i++){
if(index.children[0].innerHTML==checkboxes[i].children[1].innerHTML){
checkboxes[i].children[0].checked=false;
}
}
index.parentElement.removeChild(index)
}
</script>
</html>
标题
*{字体系列：无衬线}
正文{页边距：60px}
#过滤器{高度：100px}
标签{光标：指针}
滤器
红色
蓝色
黄的
var复选框=document.getElementById（'root'）。子项；
var filterContent=document.getElementById（'filterContent'）；
var filterChildren=filterContent.children；
对于（i=0；iHi），此代码在我单击复选框时将其转换为文本字段。但我想要的是类似Flipkart filter方法的功能，在该功能中，每当我单击某个复选框时，其名称的标记都会出现。我不太明白您想要什么，但现在我不太明白。嗨，我已经完成了检查，我替换了上面的代码。