Estoy trabajando en un archivo html. Tengo dos dos etiquetas (digamos L1 y L2). Cada etiqueta tiene dos botones de radio. Quiero ocultar L2 y sus botones de opción si un usuario selecciona cualquier botón de opción de L1.
Sé que esto se puede hacer usando un script java, pero cómo capturar la selección de botones de opción en los que puedo ejecutar mi script java.
He preparado una versión basada en tu pregunta. ¿Es esto lo que quisiste decir?
[HTML]
<div id="container" class="container"> <div id="first-radio"> <label for="L1">L1</label> <div class="radio-box"> <input type="radio" name="L1" /> L1-first </div> <div style="margin-bottom: 15px" class="radio-box"> <input type="radio" name="L1" /> L1-second </div> </div> <div id="second-radio"> <label for="L2">L2</label> <div class="radio-box"> <input type="radio" name="L2" /> L2-first </div> <div class="radio-box"> <input type="radio" name="L2" /> L2-second </div> </div>[Javascript]
const container = document.getElementById("container"); const firstRadio = document.getElementById("first-radio"); const secondRadio = document.getElementById("second-radio"); const L1_Radio1 = container.children[0].children[1]; const L1_Radio2 = container.children[0].children[2]; const L2_Radio1 = container.children[1].children[1]; const L2_Radio2 = container.children[1].children[2]; const array1 = [L1_Radio1, L1_Radio2]; const array2 = [L2_Radio1, L2_Radio2]; function hideRadio() { array1.forEach(item => { item.addEventListener("change", () => { secondRadio.style.visibility = "hidden"; }); }); array2.forEach(item => { item.addEventListener("change", () => { firstRadio.style.visibility = "hidden"; }); }); } hideRadio();Puedes verlo en acción aquí: https://jsfiddle.net/s4onh9qk/6/