用戶友好的單選按鈕單擊檢測

我正在製作一個單選按鈕等形式，其中更新功能被稱爲每當用戶改變任何東西。用戶友好的單選按鈕單擊檢測

但是，我遇到了一個問題，將它與用戶友好的單選按鈕相結合，我希望在文本和按鈕周圍有一個按鈕區域，以便於點擊。

我在檢測同時點擊區域，文本和按鈕時遇到了問題。 - 到目前爲止，我只通過比較MouseEvent.target和id（我必須給每一個元素）列表來處理它，這在我的腦海中聽起來錯了。

<div class="buttonZone"> 
    <input type="radio" id="choice1" /> 
    <label for="choice1">Choice 1</label> 
</div> 
<div class="buttonZone"> 
    <input type="radio" id="choice2" /> 
    <label for="choice2">Choice 2</label> 
</div>

任何想法將不勝感激。

來源

2017-02-25 Tc_

根據您當前的結構兩者底部或文本將觸發檢查。但是，您還需要爲輸入提供一個名稱，以便瀏覽器知道選擇哪一個。 – Ibu

您可以將輸入和標籤文本包裝在label標籤中（而不是使用for屬性將它們分開鏈接），並且整個區域都會觸發輸入。

.buttonZone { 
 
    background: #eee; 
 
    border: 1px solid #aaa; 
 
    padding: 2em; 
 
    display: inline-block; 
 
}

<label class="buttonZone"> 
 
    <input type="radio" id="choice1" /> 
 
    <span>Choice 1</span> 
 
</label> 
 
<label class="buttonZone"> 
 
    <input type="radio" id="choice2" /> 
 
    <span>Choice 2</span> 
 
</label>

來源

2017-02-25 00:34:31

我意識到這一點。但是，當我在JavaScript中檢索鼠標目標時，這似乎不起作用，因爲它仍然將輸入和span元素視爲單獨的元素，因此不會觸發更新功能。 - 我不知道如何解決這個問題。 –

@Tc_你需要更具體。似乎對我很好http://codepen.io/anon/pen/jBEyJy –

我可以看到。現在我有點好奇，知道我做錯了什麼。 - 但非常感謝！ –

你試過給值的按鈕？

<div class="buttonZone"> 
    <input type="radio" id="choice1" value="Choice 1" /> 
</div> 
<div class="buttonZone"> 
    <input type="radio" id="choice2" value="Choice 2" /> 
</div>

來源

2017-02-25 01:09:44

用戶友好的單選按鈕單擊檢測

回答

相關問題