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

Question

Example on JS FIddle

问题是：

如果第一次点击是在单选按钮上，它表现正常;但如果第一次点击是跨栏文本（即aaaa），则无法获得已检查的广播。

请告诉我为什么以及如何使它成为一样。

Answer 1

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

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

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

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

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

这可以改写为

score = $(this).val();

以下是一个有效的例子：http://jsfiddle.net/RPSwD/10/

Answer 2

请参阅新的fiddle。

问题在于这一行：

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

检查 demo 此处