CSS复选框没有输入标签onclick,纯JS

时间:2016-12-02 10:23:13

标签: javascript html css

我想在不使用html <input>标记的情况下创建一个功能性CSS复选框,但却在努力做到这一点。有人可以检查我哪里出错吗?

&#13;
&#13;
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;
&#13;
&#13;

3 个答案:

答案 0 :(得分:5)

这是一个纯粹的JS解决方案 - 一些指针:

  1. getElementsByClassName返回HTMLElement列表

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

  3. 必须为check元素提供background而不是color才能获得已检查

  4. 见下面的演示:

    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>

答案 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>