tengo boton de radio
Código HTML:
<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">Y tengo una barra de navegación
Código HTML
<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>Estos 2 están conectados con el data-cont que tiene la clase del botón de opción
Quiero que cuando haga clic en el li, se verifique el botón de opción correcto usando javascript
Intenté hacerlo usando este código en 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; }); });Intento eliminar la clase activa de li y ponerla en li donde hago clic y luego quiero que se marque el botón de opción
Cualquier cuerpo me puede ayudar en esto?
el último querySelector es donde su código está fallando, no está haciendo referencia a la clase para su entrada, debe ser document.querySelector('.' + e.currentTarget.dataset.cont).checked = true; nota la "." prefijo
Aunque eso responde a su pregunta, probablemente tenga más valor señalar que al cambiar su marcado html para que sea un poco más accesible, puede eliminar la necesidad de todo el javascript en su ejemplo
p.ej
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> El uso de etiquetas asociadas con sus botones de radio ahora es significativamente más accesible y puede reducir drásticamente mucho su marcado (aunque para ser accesible necesitaría proporcionar un nombre más significativo for atributo.