CODEWITHSUNDEEP
javascripthtmlradio-buttonchecked
MalronWall
MalronWall

Reputation: 13

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

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...

Upvotes: 0

Views: 681

Answers (3)

MalronWall
MalronWall

Reputation: 13

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).

Upvotes: 1

run_time_error
run_time_error

Reputation: 707

It is unclear what you want from your question. You have set the hidden property for the inputs, so it will not show up, but it did change when you click the a tags.

If you want to show the radio button as checked when a particular a tag is clicked, you need to set the hidden property of that particular input to false. https://jsfiddle.net/y718p9k3/3/

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;
        for (let j=0;j<inputs01.length;j++) {
            inputs01[j].hidden = true;
        }
        inputs01[k].hidden = false;
    });
}

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 370799

Setting the checked property doesn't seem to work, but setAttribute does. Clicking below results in the checked property going from false to true, as you can see in the logs:

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() {
    console.log(inputs01[k].checked);
    inputs01[k].setAttribute('checked', true);
    console.log(inputs01[k].checked);
  });
}
<ul class="nav md-pills pills-default flex-column" role="tablist">
  <li class="nav-item">
    <input type="radio" name="q01" value="1" checked hidden>
    <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>

Upvotes: 0

Related Questions