I'm trying to hide a radio button when another button is selected. I managed to hide the actual button but I can't find a way to hide the label/ name. This code below only hides the button.

document.getElementById('lights').style.display = 'none'; 

Code below is the actual button. I even trid putting the name in label tags.

Lights
<input  type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="lights" />

CodePudding user response：

You can add the "lights" word inside a label or a span then use "previousElementSibling" to hide it.

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" />

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

A better usability pattern would deemphasize it visually. Listen for clicks to the parent element and set a CSS class. Target the radio group's :checked attribute. Apply a style to the next element, a label with a for= attribute.

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>