我想在不使用html <input>
标记的情况下创建一个功能性CSS复选框,但却在努力做到这一点。有人可以检查我哪里出错吗?
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";
}
});
&#13;
.checkbox1 {
border: 1px solid black;
height: 10px;
width: 10px;
display: inline-block;
}
.check {
visibility: hidden;
color: black;
}
&#13;
<span class="checkbox1">
<i class="check"></i>
</span>
<span class="checkbox1">
<i class="check"></i>
</span>
&#13;
答案 0 :(得分:5)
这是一个纯粹的JS解决方案 - 一些指针:
getElementsByClassName
返回HTMLElement
列表
切换class
名称比编辑样式更容易
必须为check
元素提供background
而不是color
才能获得已检查。
见下面的演示:
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>
答案 1 :(得分:2)
带有Checkbox类的OOP风格。您可以存储对Checkbox实例的引用,以便轻松访问代码中的“已检查”属性。 此外,可以使用getter-setter定义“checked”属性,以便在属性更改时呈现复选框。
function Checkbox(elem) {
this.elem = elem;
this.checked = elem.dataset.checked;
// Extend your component:
// this.name = ...
// this.value = ...
// this.onchange = ...
elem.addEventListener('click', e => {
this.checked = !this.checked;
this.render();
});
}
Checkbox.prototype.render = function() {
this.elem.setAttribute('data-checked', this.checked);
}
function initCheckboxes(elems) {
for (let i = 0; i < elems.length; i++) {
new Checkbox(elems[i]);
}
}
initCheckboxes(document.querySelectorAll('.checkbox'));
.checkbox {
position: relative;
display: inline-block;
height: 15px;
width: 15px;
border: 1px solid;
cursor: pointer;
}
.checkbox:after {
position: absolute;
width: 100%;
line-height: 100%;
text-align: center;
}
.checkbox[data-checked="true"]:after {
content: "✓";
}
<span class="checkbox"></span>
<span class="checkbox" data-checked="true"></span>
答案 2 :(得分:1)
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<style>
.checkbox{
border: 1px solid black;
height: 10px;
width: 10px;
display: inline-block;
}
.checked{
background:red;
}
</style>
<span class="checkbox" id="chk_1">
<i class="checked"></i>
</span>
<span class="checkbox" id="chk_2">
<i class="check"></i>
</span>
<script>
var cbElement = $(".checkbox");
$(cbElement).click(function(){
var currentCb = $(this).attr('id')
if($("#"+currentCb).hasClass("checked")){
$("#"+currentCb).removeClass("checked");
}else {
$("#"+currentCb).addClass("checked");
}
});
</script>