自定義復選框不檢查

Question

我正在嘗試自定義我的復選框，我嘗試了一些不同的教程，但對於其中的每一個，我仍然無法選中或取消選中。

到目前為止，這是我的代碼： https : //jsfiddle.net/NecroSyri/behgLox0/10/

我正在使用 vanilla 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 行代碼。 但仍然：它應該完成這項工作。

快樂編碼