Javascript：获取标签中带有特定“for”的单选按钮标签

Question

我有一个这样的表单元素：

<div id="myformelement">
   <input type="radio" id="option1">
   <label for="option2">Option 1</label>
   <input type="radio" id="option2">
   <label for="option2">Option 2</label> 
   <input type="radio" id="option3">
   <label for="option3">Option 3</label> 
   <input type="radio" id="option4">
   <label for="option4">Option 4</label>  
</div>

我想隐藏输入字段“option2”和“option3”及其标签。

我可以通过寻址 id 来隐藏输入项目符号。不幸的是，输入字段的相应标签只有一个带有 id 的“for”标签。

如何使用 javascript（没有 jquery）来做到这一点。

我发现了这个问题 (Find html label associated with a given input)，但这似乎只适用于 ID 中的一个标签，我不能使用它。

提前致谢！ 亲切的问候， 马耳他

Answer 1

您可以使用nextSibling：

var rdo = document.getElementById("option2");
var lbl;

rdo.style.display = "none";
for (lbl = rdo.nextSibling; lbl && lbl.nodeName.toUpperCase() !== "LABEL"; lbl = lbl.nextSibling) {
}
if (lbl) {
    lbl.style.display = "none";
}

但我有一个更好的选择给你：label 元素可以包含与它们相关的input，而当它们不包含@987654325 时，这似乎是一个保守的秘密@ 是必需的。因此，如果您将 HTML 更改为：

<div id="myformelement">
   <label><input type="radio" id="option1"> Option 1</label>
   <label><input type="radio" id="option2"> Option 2</label> 
   <label><input type="radio" id="option3"> Option 3</label> 
   <label><input type="radio" id="option4"> Option 4</label>  
</div>

...它变得很多更容易：

document.getElementById("option2").parentNode.style.display = "none";

您只需找到input，遍历其父级label，然后隐藏它（这也会隐藏input）。

Answer 2

在纯 JavaScript 中你可以使用 querySelector:

document.querySelector("label[for='option2']").style.display = "none";