选中其他按钮时如何隐藏指定radio按钮及其关联的标签与名称

你当前的代码仅隐藏了单选框input元素，它旁边的“Lights”文本是独立于input的文本节点，所以不会随着input隐藏而消失。以下是几种可直接落地的解决方案：

方案1：推荐（改动最小、最易维护） #

给单选框和对应文本加公共父容器，直接隐藏父容器即可同时隐藏文本和按钮。
修改后的HTML代码：

<!-- 给两个元素套一个父容器，自定义id即可 -->
<span id="lightsContainer">
  Lights
  <input  type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="lights" />
</span>

对应JS代码替换为：

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

方案2：无需修改现有HTML结构的实现 #

如果不能改动原有HTML代码，可以通过获取input前的文本节点，和input一起隐藏：

const lightInput = document.getElementById('lights')
// 移除input前的文本节点
lightInput.previousSibling.remove()
// 隐藏单选框本身
lightInput.style.display = 'none'

如果后续需要恢复显示，更建议使用方案1，无需额外存储原始文本内容。

方案3：已用label标签关联的场景 #

如果你已经用label的for属性和单选框id做了关联，结构如下：

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

可以同时选中label和input分别隐藏：

document.getElementById('lights').style.display = 'none'
document.querySelector('label[for="lights"]').style.display = 'none'

内容的提问来源于stack exchange，提问作者codinglearn