點擊標籤點擊單選按鈕

我想要這樣：當用戶點擊單選按鈕標籤時，它會自動點擊單選按鈕本身。目前，如果用戶在單選按鈕後面單擊標籤，則不會發生任何事情，從而迫使用戶單擊小號單選按鈕本身。點擊標籤點擊單選按鈕

有些人建議在標籤上使用'for'屬性，但爲此我需要更改第二個選項的'id';通過這樣做，表單將發佈兩個選項作爲檢查，所以它不會在我的情況下工作。

下面是HTML：

<form href="#"> 
<input type="radio" id="option1" name="option1" data-label="Option one" value="1"><label class="radio-label">Option one</label> 
    <input type="radio" id="option1" name="option1" data-label="Option two" value="2"><label class="radio-label">Option two</label> 
    <input type="submit"/> 
</form>

要做到這一點，我試圖使用jQuery來創建一個類的無線標籤「每個標籤上點擊方法，使點擊它的單選按鈕。像下面的代碼，但它不工作：

$('.radio-label').each(function (i) { 
    $(this).previous().click(); 
});

來源

2017-07-26 delphirules

其實你不需要任何js或jQuery代碼。只需在label內包含for屬性即可。由於它的價值，請提供指定單選按鈕的id。

<input type="radio" id="option1" name="option1" data-label="Option one" value="1" /><label class="radio-label" for='option1'>Option one</label> 
 
<input type="radio" id="option2" name="option1" data-label="Option two" value="2" /><label class="radio-label" for='option2'>Option two</label>

來源

2017-07-26 13:25:44

哦，很好！謝謝：D – delphirules

雖然它的工作原理，如果我更改'option2'的id屬性，當我發佈表單時，兩者都將被張貼，因爲兩者都被檢查。我怎樣才能解決這個問題？ – delphirules

使用for的<label>屬性。

與標籤元素位於同一文檔中的可鏈接表單相關元素的ID。文檔中第一個具有與for屬性值匹配的ID的元素是此標籤元素的標籤控件。

<label for="option2" class="radio-label">Option two</label>

<input type="radio" id="option1" name="option1" data-label="Option one" value="1"><label for="option1" class="radio-label">Option one</label> 
 
<input type="radio" id="option2" name="option1" data-label="Option two" value="2"><label for="option2" class="radio-label">Option two</label>

來源

2017-07-26 13:26:10 Satpal

這工作，但它如果我將'id'更改爲'option2'，當我發佈表單時，它會發布這兩個選項;我怎麼知道什麼選項被檢查？ – delphirules

@delphirules，當'form'發佈時，它使用'name'屬性而不是'id'，你應該檢查'radio'的'value'屬性來檢查選擇了哪個選項。 – Satpal

您可以包裝label標籤內的input標籤。就像這樣：

<label class="radio-label"><input type="radio" id="option1" name="option1" data-label="Option one" value="1">Option one 
</label> 
<label class="radio-label"><input type="radio" id="option1" name="option1" data-label="Option two" value="2">Option two</label>

來源

2017-07-26 13:29:35

您應該使用label for。（無需JS）

<input type="radio" id="option1" name="option" data-label="Option one" value="1"><label class="radio-label" for="option1">Option one</label> 
<input type="radio" id="option2" name="option" data-label="Option two" value="2"><label class="radio-label" for="option2">Option two</label>

Solution

來源

2017-07-26 13:31:00

雖然它的工作原理，如果我更改'option2'的id屬性，當我發佈表單時，兩者都將被張貼，因爲兩者都被選中。我怎樣才能解決這個問題？ – delphirules

把輸入標籤標籤thatis足夠

<label class="radio-label"><input type="radio" id="option1" name="option1" data-label="Option one" value="1">Option one</label> 
 
    <label class="radio-label"><input type="radio" id="option1" name="option1" data-label="Option two" value="2">Option two</label>

來源

2017-07-26 13:39:21 codegeek

你不需要這方面的任何JS，只需使用這裏面

<label for="option2" class="radio-label">Option two</label> 

<input type="radio" id="option1" name="option" data-label="Option one" value="1"><label class="radio-label" for="option1">Option one</label> 
<input type="radio" id="option2" name="option" data-label="Option two" value="2"><label class="radio-label" for="option2">Option two</label>

來源

2017-07-26 13:43:55

雖然它的工作原理，如果我更改'option2'的id屬性，當我發佈表單時，兩者都將被張貼，因爲兩者都被選中。我怎樣才能解決這個問題？ – delphirules

點擊標籤點擊單選按鈕

回答

相關問題