javascript - 没有输入标签 onclick 的 CSS 复选框，纯 JS

Question

我想在不使用 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>

Answer 1

这是一个纯 JS 解决方案 - 一些提示:

1. getElementsByClassName 返回一个 HTMLElement 列表

2. 切换 class 名称比编辑样式更容易

3. 必须为 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">&nbsp;</i>
</span>

<span class="checkbox1">
    <i class="check">&nbsp;</i>
</span>