2015-11-13 103 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