Javascript (Vanilla) element.checked = true/false does not work

Question

My HTML code :

<ul class="nav md-pills pills-default flex-column" role="tablist">
    <li class="nav-item">
        <input type="radio" name="q01" value="1" hidden checked>
        <a class="nav-link choice01 active" data-toggle="tab" href="#answer1-1" role="tab">1</a>
    </li>
    <li class="nav-item">
        <input type="radio" name="q01" value="2" hidden>
        <a class="nav-link choice01" data-toggle="tab" href="#answer1-2" role="tab">2</a>
    </li>
    <li class="nav-item">
        <input type="radio" name="q01" value="3" hidden>
        <a class="nav-link choice01" data-toggle="tab" href="#answer1-3" role="tab">3</a>
    </li>
    <li class="nav-item">
        <input type="radio" name="q01" value="4" hidden>
        <a class="nav-link choice01" data-toggle="tab" href="#answer1-4" role="tab">4</a>
    </li>
</ul>

My JS code :

const choices01 = document.getElementsByClassName("choice01");
const inputs01 = document.querySelectorAll("input[name=q01]");

for (let k=0; k<choices01.length; k++) {
    choices01[k].addEventListener("click", function(){
        inputs01[k].checked = true;
    });
}

I have several questions which each have an "a" element and the "choice[numberOfTheQuestion]" class. For each of them, I have a hidden radio input that I would like to check when I click on the element "a".

However when I do a console.log(inputs01[k]) in the for and that I click then on one of the 4 choices, this one is displayed without the checked as if I had not clicked.

NB : inputs01[k] sends me back the correct element on which I clicked...

Answer 1

element.checked = true; works, it just does not modify the html.

To verify that an element is well checked, you should not do console.log(element) (which will just return the element without the checked) but rather make a console.log(element.checked) and look in the console if we have true (checked) or false (not checked).

---