的Javascript：獲得與特定的單選按鈕標籤「爲」在標籤

我有一個這樣的表單元素：的Javascript：獲得與特定的單選按鈕標籤「爲」在標籤

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

我想隱藏輸入欄「選項2」和「選項3」和它們的標籤。

我可以通過尋址id來隱藏輸入項目符號。不幸的是，輸入字段的相應標籤只有一個帶有id的「for」標籤。我怎樣才能做到這一點與JavaScript（沒有jquery）。

我發現這個問題（Find html label associated with a given input），但這似乎只適用於一個ID內的一個標籤，我不能使用它。

在此先感謝！親切的問候，馬爾特

來源

2013-02-20 user2092199

您可以與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-20 17:01:23

+1的輸入在標籤中更好的辦法可以解決這個問題不是單獨隱藏要素。 – VisioN 2013-02-20 17:07:06

這一個完美工作，謝謝 – user2092199 2013-02-21 10:08:33

在純JavaScript可以使用querySelector：

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

來源

2013-02-20 17:01:31 VisioN

+1絕對，只要你不需要支持IE7或更早版本。 http://caniuse.com/#feat=queryselector – 2013-02-20 17:05:12

@ T.J.Crowder誰在乎IE7及更早的版本;） – VisioN 2013-02-20 17:06:07

@ VisioN：在亞洲，特別是中國，人數真的相當多。但是，嘿，我們都可以安全地忽略十三億人中的二十多個百分之十三的人，對吧？ ;-)（認真對待：如果只有英文的話，肯定有幾個網站可以[當然是我參與過的所有的網站] :-)） – 2013-02-20 17:08:14

的Javascript：獲得與特定的單選按鈕標籤「爲」在標籤

回答

相關問題