單擊文本以選擇相應的單選按鈕

我使用PHP創建測驗Web應用程序。每個問題由一個單獨的<label>組成，並且有4個可能的選擇，使用radio buttons來允許用戶選擇他/她的答案。單個問題的現有HTML看起來像：單擊文本以選擇相應的單選按鈕

<label for="349">What is my middle name?</label> 
<br> 
<input id="349" type="radio" value="1" name="349">Abe 
<br> 
<input id="349" type="radio" value="2" name="349">Andrew 
<br> 
<input id="349" type="radio" value="3" name="349">Andre 
<br> 
<input id="349" type="radio" value="4" name="349">Anderson 
<br>

我想用戶有點擊與單選按鈕關聯的文本的選項。現在，用戶只能點擊單選按鈕 - 我發現這是一項非常繁瑣的任務。

我讀了Unable to select a particular radio button choice by clicking on the choice text，並提出了使標籤的for和id屬性匹配的建議。我已經做到了這一點，但仍然無法正常工作。

我的問題是：我希望能夠單擊<input type="radio">對象的文本，而不是隻能夠選擇單選按鈕本身。我知道我以前閱讀過這篇文章，但似乎找不到解決我的問題的方法。任何幫助或建議非常感謝！

來源

2011-10-22 Abundnce10

136

在你的代碼中，你在表單本身上有一個標籤。您想要在每個單獨的電臺組上放置標籤，如下所示。

<form> 
 
    <p>What is my middle name?</p> 
 
    <br> 
 
    <input id="349" type="radio" value="1" name="question1"> 
 
    <label for="349">Abe</label> 
 
    <br> 
 
    <input id="350" type="radio" value="2" name="question1"> 
 
    <label for="350">Andrew</label> 
 
    <br> 
 
    <input id="351" type="radio" value="3" name="question1"> 
 
    <label for="351">Andre</label> 
 
    <br> 
 
    <input id="352" type="radio" value="4" name="question1"> 
 
    <label for="352">Anderson</label> 
 
    <br> 
 
</form>

你應該記住兩個元素不應該有相同的ID。 name屬性用於使單選按鈕作爲一組使用，並且一次只允許單個選擇。

來源

2011-10-22 23:23:20 Nathan

優越簡單。喜歡它當一個幾乎隱藏的標籤功能被重新發現 – foochow

標籤標籤應該在每個答案的周圍，例如，圍繞安倍，安德魯等等，而且每個人都需要獨一無二。

來源

2011-10-22 23:24:04 endyourif

如果根據Nathan的回答完成單選按鈕和標籤之間似乎有一個不可點擊的空間。這裏是如何讓他們無縫地加入（見this article）：

<form> 
    <p>What is my middle name?</p> 
    <br> 
    <label><input id="349" type="radio" value="1" name="question1">Abe</label> 
    <br> 
    <label><input id="350" type="radio" value="2" name="question1">Andrew</label> 
    <br> 
    <label><input id="351" type="radio" value="3" name="question1">Andre</label> 
    <br> 
    <label><input id="352" type="radio" value="4" name="question1">Anderson</label> 
    <br> 
</form>

來源

2015-12-14 12:27:51 user21820

我更喜歡這個答案。但是你確定你甚至需要這種方法的「for」屬性嗎？ – Piddu

@Piddu：我認爲你是對的，所以我已經更新了我的答案。謝謝！ – user21820

你可以像下面這樣做

<label for="1">hi</label> 
<input type="radio" id="1" />

所以，如果你點擊文本或標籤，它選擇的單選按鈕。但是，如果你這樣做......

<label for="1">//</label>

和您添加到我這之前剛寫的代碼，然後如果你點擊第二個標籤那麼它也將選擇收音機。

來源

2016-10-10 01:19:08

將輸入標籤嵌套在標籤標籤內可確保標籤顯示在單選按鈕旁邊。使用前面提到的方法，您可以將標籤標籤放置在html文件的任何位置，並在單擊時選擇相關的單選按鈕。檢查了這一點：

<html> 
 
<body> 
 

 
<form> 
 
    <p>What is my middle name?</p> 
 
    <br> 
 
    <input id="349" type="radio" value="1" name="question1"> 
 

 
    <br> 
 
    <input id="350" type="radio" value="2" name="question1"> 
 
    <label for="350">Andrew</label> 
 
    <br> 
 
    <input id="351" type="radio" value="3" name="question1"> 
 

 
    <br> 
 
    <input id="352" type="radio" value="4" name="question1"> 
 
    <label for="352">Anderson</label> 
 
    <br> 
 
</form><br/> 
 
<p>This is a paragraph</p> 
 
    <label for="349">Abe</label><br/> 
 
    <label for="351">Andre</label> 
 
    
 
</body> 
 
</html>

這樣做，這樣反而消除了這種缺陷：

<form> 
 
    <p>What is my middle name?</p> 
 
    <br> 
 
    
 
    <label> 
 
    <input id="349" type="radio" value="1" name="question1"/>Abe 
 
    </label> 
 
    <br> 
 
    
 
    <label> 
 
    <input id="350" type="radio" value="2" name="question1"/>Andrew 
 
    </label> 
 
    <br> 
 
    
 
    <label> 
 
    <input id="351" type="radio" value="3" name="question1"/>Andre 
 
    </label> 
 
    <br> 
 
    
 
    <label> 
 
    <input id="352" type="radio" value="4" name="question1"/>Anderson 
 
    </label> 
 
    <br> 
 
</form>

來源

2017-10-14 13:52:38 Neo

單擊文本以選擇相應的單選按鈕

回答

相關問題