Question

我试图自定义复选框，尝试了一些不同的教程，但是对于其中每个教程，我仍然无法选中或取消选中。

到目前为止，这是我的代码： https://jsfiddle.net/NecroSyri/behgLox0/10/

我使用的是香草CSS和html，也有js，但与复选框无关，我试图对其进行注释，以防万一，结果相同。

redrawCheckboxes(); //this function create the elements that replaces the checkboxes, but that's all

任何人都知道是什么使单击来检查/取消检查输入？谢谢

Answer 1

好吧，我找到了另一种更改复选框设计而不是重新绘制的方法：

https://jsfiddle.net/NecroSyri/behgLox0/17/

大部分在这里：

-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;

Answer 2

我看了看你的jsFiddle并尝试了一些东西。

我在您的CSS中注释了这些行

.tree input[type=checkbox] {
  display: none;
}

了解如何将复选框绑定到自定义复选框。

我发现，当您单击原始复选框时，您的海关绑定良好。但事实并非相反。确实，我看不到onClick侦听器是JS。但是我真的是Vanilla的菜鸟，所以也许我错过了一些东西。

但是我认为，我会在您的redraw()方法中添加以下内容：

function redrawCheckboxes(){
document.querySelectorAll('.tree input[type="checkbox"]').forEach(function(cbox){
    var cmark = document.createElement('i');
    var newbox = cbox;
    var parentElem = cbox.parentElement;
    parentElem.prepend(cmark);
    parentElem.prepend(newbox);
    cmark.classList.add('checkmark');
    cmark.addEventListener("click", function(e) {
        cmark.previousElementSibling.checked = !cmark.previousElementSibling.checked;
    });
});

}

我确定您会找到一种方法来清除最后三行代码。但仍然：应该可以完成工作。

快乐编码

自定义复选框不会选中

2 个答案: