2

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

<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 中的一个标签，我不能使用它。

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

4

2 回答 2

4

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

document.querySelector("label[for='option2']").style.display = "none";
于 2013-02-20T17:01:31.693 回答
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）。

于 2013-02-20T17:01:23.160 回答