javascript - 为什么单选按钮单击事件的行为不同

Question

JS Fiddle 上的示例。

问题是：

如果第一次单击是在单选按钮上，则行为正常；但是如果第一次点击是跨文本（即aaaa），它不能得到选中的收音机。

请告诉我为什么以及如何使它相同。

Answer 1

此代码在单击单选按钮时发生：

var obj = $(e.target||e.srcElement).parent();
score = obj.find('input:checked').val();

将父级放入obj变量中，该变量是包含 DIV。这包含两个单选按钮。然后它会在该 DIV 中找到第一个检查的输入元素，该元素在检查后始终是具有“第一个”值的元素。

您应该只获得被点击的项目的价值：

score = $(e.target||e.srcElement).val();

这可以重写为

score = $(this).val();

这是一个工作示例：http: //jsfiddle.net/RPSwD/10/

Answer 2

见新小提琴。

问题是这一行：

score = obj.find('input:checked').val();

将其更改为：

score = $(this).val();

这样做的原因是您正在 div 中查找所选项目，但在第一次单击时，该项目尚未被选中。鉴于事件是针对单选按钮的，您可以假设单选按钮是选定的。

另请注意，您不需要使用e.target||e.srcElement. jQuery 会为您解决这个问题。改为使用$(this)。

此外，您需要在单选按钮上设置一个名称以阻止两者都被选中。或者，如果同时选择两者是所需的行为，请改用复选框。

Answer 3

您不需要使用任何event属性：

var score = $(this).val(); // in your '.x' click handler

$('.y').click(function(e) {
    $(this).prev('.x').click();
});

Answer 4

只需像这样将您的单选按钮包装在标签标签内

<label for="radio1">
   <input type=radio class="x" id="radio1" value="First"/>
   <span class="y">aaaa</span>
</label>

不需要额外的 jquery 或 javascript

在这里查看演示