Question

我有以下表格，用户可以选择输入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>

当我点击＆＃34;会员ID或姓氏时，会切换单选按钮。但是，当我单击文本输入时，这对单选按钮没有影响。

这是预期的行为吗？如果是这样，有没有办法调整HTML以使其工作？

注意：这不是JavaScript问题。

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

Answer 1

是的，这似乎是在Windows 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>

Answer 2

在常规html中，无线电输入类型与除了与之关联的标签以外的任何内容都无关。因此，之前或之后的任何其他输入文本字段都需要通过某种javascript连接起来。

Answer 3

我想我找到了答案。

W3建议指出：

在HTML文档中，元素必须从用户获得焦点才能变为活动状态并执行其任务

问题是，当用户点击文字输入时，单选按钮会失去焦点而不会被激活。

来源（html4）：http://www.w3.org/TR/html4/interact/forms.html#focus

单选按钮没有打开点击，为什么？

3 个答案: