2015-11-13 33 views
0

我有以下形式,即用戶可以選擇輸入兩個ID或名稱:單選按鈕無法點擊,爲什麼?

<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID"></label><br/> 
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName"></label> 

當我點擊「會員號或姓氏,這種切換單選按鈕然而,當我點擊文字輸入,這對單選按鈕沒有任何影響

這是預期的行爲如果是這樣,有什麼辦法可以調整的HTML,使其工作

注意:?這不是一個JavaScript問題。

小提琴:https://jsfiddle.net/3by5wqzw/

回答

1

是的,這似乎是預期的行爲在Chrome 10上的chrome,microsoft edge和firefox以及android棒棒糖的chrome上。 您可以使用JavaScript代碼來解決這個問題:

<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID" onclick="document.getElementById('ID').checked = true;"></label><br/> 
 
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName" onclick="document.getElementById('Name').checked = true;"></label>

當你點擊一個文本輸入時,客戶端會自動檢查匹配的單選按鈕,通過它的id尋找它。

作爲一種選擇,你可以把JavaScript代碼的函數,因此它看起來更好,是比較容易,如果你有很多的單選按鈕與它相關聯的文字輸入編輯:

function check_radio(element_id){ 
 
    document.getElementById(element_id).checked = true; 
 
}
<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID" onclick="check_radio('ID');"></label><br/> 
 
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName" onclick="check_radio('Name');"></label>

+0

能否請您詳細闡述,也許添加支持這種說法,這是預期的行爲參考? – Christophe

+0

@Christophe當然!我已經在Javascript代碼中添加了一些解釋,並指出我相信這是預期的行爲,因爲我在幾個常見的瀏覽器/平臺上進行了一些測試。如果您需要 – Stubborn

0

在普通html中,無線電輸入類型與除與其關聯的標籤之外的任何東西都沒有關係。因此,之前或之後的任何其他輸入文本字段都需要通過某種javascript進行連接。

+0

,我可以添加其他內容,問題在於文本輸入在標籤內,這就是爲什麼我期望它能夠工作 – Christophe

0

我想我找到了答案。

W3的推薦狀態:

在一個HTML文檔,元素必須接收來自用戶的焦點,才能成爲活躍和執行任務

的問題是,當用戶點擊文本輸入,單選按鈕失去焦點並且未被激活。

源(HTML4):http://www.w3.org/TR/html4/interact/forms.html#focus