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

在纯JavaScript中，您可以使用querySelector：

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

Answer 2

您可以使用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以及它们何时成为一个保密的秘密根本不需要for。因此，如果您将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）。

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

2 个答案: