使用 javascript 单击 li 时检查单选按钮

Question

I have radio button

Html code:

<input type="radio" class="first" name="bright" checked>
<input type="radio" class="second" name="bright" >
<input type="radio" class="third" name="bright">
<input type="radio" class="four" name="bright">

And i have a nav bar

Html code

<ul class="nav">

<li class="st st1 active" data-cont="first">
<h2 class="inner">وزارة الاستثمار</h2>
</li>
<li class="st st2" data-cont="second">
<h2 class="inner">وزارة التجارة</h2>
</li>
<li class="st st3" data-cont="third">
<h2 class="inner">جهات حكومية اخرى</h2>
</li>
<li class="st st4" data-cont="four">
<h2 class="inner">مكتب هندسي</h2>
</li>
 </ul>

These 2 are conected with the data-cont that have the class of the radio button

I want when i click on the li the correct radio button be checked using javascript

I tried to make it using this code in JavaScript

let radio = document.querySelectorAll("input");
let radioArray = Array.from(radio);
let tabs = document.querySelectorAll(".nav li");
let tabsArray = Array.from(tabs);


tabsArray.forEach((ele) => {
    ele.addEventListener("click", function (e) {
        tabsArray.forEach((ele) => {
            ele.classList.remove("active");
        });
        e.currentTarget.classList.add("active");
       document.querySelector(e.currentTarget.dataset.cont).checked = true;
    });
});

I try to remove the active class from li and put it on the li where i click then i want the radio button be checked

Any body can help me on this?

Answer 1

the last querySelector is where your code is failing you're not referencing the class for your input it needs to be document.querySelector('.' + e.currentTarget.dataset.cont).checked = true; note the "." prefix

Although that answers your question there is probably more value in pointing out that by changing your html markup to be a little more accessible you can eliminate the need for all of the javascript in your example

eg

 input:checked + label { color:Red; }

 <div><input type="radio" id="first" name="bright" checked> <label for='first'>وزارة الاستثما</label> </div> <div> <input type="radio" id="second" name="bright" > <label for='second'>وزارة التجارة</label> </div> <div> <input type="radio" id="third" name="bright"> <label for='third'>جهات حكومية اخرى</label> </div> <div> <input type="radio" id="four" name="bright"> <label for='four'>مكتب هندسي</label> </div>

The use of labels associated with your radio buttons is now significantly more accessible and you can drastically reduce a lot of your markup ( though to be accessible you would need to provide a more meaningful name for for attribute.