Estoy tratando de ocultar un botón de opción cuando se selecciona otro botón. Logré ocultar el botón real pero no puedo encontrar una manera de ocultar la etiqueta/nombre. Este código a continuación solo oculta el botón.
document.getElementById('lights').style.display = 'none';El código a continuación es el botón real. Incluso intenté poner el nombre en las etiquetas de las etiquetas.
Lights <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="lights" />Puede agregar la palabra "luces" dentro de una etiqueta o un intervalo y luego usar "previousElementSibling" para ocultarlo.
const radioBtn = document.getElementById('lights'); radioBtn.style.display = 'none'; radioBtn.previousElementSibling.style.display = 'none'; <span>Lights</span> <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="lights" />Un mejor patrón de usabilidad le quitaría el énfasis visualmente. Escuche los clics en el elemento principal y configure una clase CSS. Apunte al atributo :checked del grupo de radio. Aplique un estilo al elemento + siguiente, una etiqueta con un atributo for=.
let selector = "fieldset"; let parent = document.querySelector(selector); parent.onclick = function(event) { let element = event.target; // if click child, deemphasize if (element.nodeName.toLowerCase() != selector) { element.closest(selector).classList.add("taint"); } } .taint { border: 0.125em dotted red; } .taint input[type=radio]:not(:checked)+label { opacity: 0.25; } <fieldset> <input type="radio" name="hue" id="light" /><label for="light">Light</label> <input type="radio" name="hue" id="dark" /><label for="dark">Dark</label> </fieldset>