通過點擊標籤來切換HTML單選按鈕

是否有簡單的方法讓單選按鈕切換 - 當點擊附近的文本時 - 沒有向我的小PHP項目中引入任何大的Javascript框架？通過點擊標籤來切換HTML單選按鈕

Web窗體看起來是這樣的：

<html> 
<body> 
<form method="post"> 
<p>Mode:<br /> 
<input type="radio" name="mode" value="create"><i>create table</i><br /> 
<input type="radio" name="mode" value="select" checked>select records (can specify id)<br /> 
<input type="radio" name="mode" value="insert">insert 1 record (must specify all)<br /> 
<input type="radio" name="mode" value="delete">delete records (must specify id)<br /> 
<input type="radio" name="mode" value="drop"><i>drop table</i><br /> 
</p> 
<p>Id: <input type="text" name="id" size=32 maxlength=32 /> (32 hex chars)</p> 

<p>Latitude: <input type="text" name="lat" size=10 /> (between -90 and 90)</p> 
<p>Longitude: <input type="text" name="lng" size=10 /> (between -90 and 90)</p> 
<p>Speed: <input type="text" name="spd" size=10 /> (not negative)</p> 
<p><input type="submit" value="OK" /></p> 
</form> 
</body> 
</html>

來源

2010-11-18 Alexander Farber

130

你也可以換你的元素沒有給他們每一個ID，因爲<label>隱式地包含它的輸入，如下所示：

<label> 
    <input type="radio" name="mode" value="create"> 
    <i>create table</i> 
</label>

來源

2010-11-18 09:23:59

這使得標籤造型變得更加困難，並且需要將文字包裹在更多元素中。 – Soviut 2014-05-12 16:03:55

是的，但如果你不是造型，它可以更容易地獲得你想要的功能。我不喜歡添加額外的ID和「for」屬性。 – 2014-08-21 00:25:13

+1 ID可能非常邪惡，所以最好避免它們作爲一般規則 – 2014-08-29 20:12:43

您可以使用<label>元素，其目的是爲了做到這些：

<input type="radio" id="radCreateMode" name="mode" value="create" /> 
<label for="radCreateMode"><i>create table</i></label>

來源

2010-11-18 09:16:16

謝謝，它是否適用於所有現代瀏覽器？ – 2010-11-18 09:18:32

@亞歷山大，絕對。只有Safari版本2及更低版本不支持它。 – 2010-11-18 09:19:34

然後，您可以使用選擇器'input＃radCreateMode：checked〜label'將樣式應用於標籤。如果我們將輸入嵌套在標籤內，則在選擇時將樣式應用於標籤是不可能的。 – 2016-02-04 12:45:49

包裝標籤下的輸入應該工作。

<label> 
    <input type="radio" name="mode" value="create"><i>create table</i> 
</label>

來源

2015-11-29 03:14:37

此答案不依賴於id屬性 - 一件好事！ – user1068352 2016-05-27 11:31:15

我很難找到使用這種方法的單選按鈕的值，一個替代方案是使用一個命中區域increasing clickable area of a button。

來源

2016-12-06 02:15:02

通過點擊標籤來切換HTML單選按鈕

回答

相關問題