自定义复选框不检查

Question

I'm trying to customize my checkboxes, I've tried a few different tutorials, but for every single one of them, I'm still unable to check or uncheck.

Here's my code so far : https://jsfiddle.net/NecroSyri/behgLox0/10/

I'm using vanilla css and html, there's js too but it's unrelated to the checkboxes, I've tried to comment it just in case, same result.

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

Anyone has an idea what's keeping the click to check/uncheck the inputs ? Thanks

Answer 1

Ok I found another way to actually change the checkbox design instead of redrawing it :

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

most of it is here :

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

Answer 2

I had a look at your jsFiddle and tried a few things.

I commented those lines in your CSS

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

to understand how you binded your checkbox to your custom ones.

I discovered that when you click on the original checkbox, your customs ones are well binded. But not the opposite. Indeed, I see no trace of an onClick listener is you JS. But I'm really a noob in Vanilla, so maybe I'm missing something.

But in my opinion, I would add something like this in your redraw() method :

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;
    });
});

}

I'm sure you'll find a way to clean those 3 last lines of code. But still : it should do the job.

Happy coding