自定义复选框未选中

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。但我真的是香草的菜鸟，所以也许我错过了一些东西。

但在我看来，我会在您的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;
});
});

}

我相信你会找到一种方法来清理最后 3 行代码。 但仍然 ：它应该完成这项工作。

快乐编码