我想在不使用 html 的情况下制作功能性 CSS 复选框 <input>
标签,但努力做到这一点。有人可以检查我哪里出错了吗?
var cbElement = document.getElementsByClassName("checkbox1");
cbElement.addEventListener("click", function() {
var checkbox = document.getElementsByClassName("check");
if (checkbox.style.visibility == "hidden") {
document.getElementByClassName("check").style.visibility = "visible";
} else if (checkbox.style.visibility == "visible") {
document.getElementsByClassName("check").style.visibility = "hidden";
}
});
.checkbox1 {
border: 1px solid black;
height: 10px;
width: 10px;
display: inline-block;
}
.check {
visibility: hidden;
color: black;
}
<span class="checkbox1">
<i class="check"></i>
</span>
<span class="checkbox1">
<i class="check"></i>
</span>
最佳答案
这是一个纯 JS 解决方案 - 一些提示:
getElementsByClassName
返回一个HTMLElement
列表切换
class
名称比编辑样式更容易必须为
check
元素提供background
而不是color
以获得checked 的感觉.
请看下面的演示:
var cbElements = document.getElementsByClassName("checkbox1");
for (var i = 0; i < cbElements.length; ++i) {
cbElements[i].addEventListener("click", function() {
this.getElementsByClassName("check")[0].classList.toggle('active');
});
}
.checkbox1 {
border: 1px solid black;
height: 10px;
width: 10px;
display: inline-block;
cursor:pointer;
}
.check {
visibility: hidden;
background: black;
display: block;
height: 100%;
}
.active {
visibility: visible;
}
<span class="checkbox1">
<i class="check"> </i>
</span>
<span class="checkbox1">
<i class="check"> </i>
</span>
关于javascript - 没有输入标签 onclick 的 CSS 复选框,纯 JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40929876/