Javascript 单击父项时更改单选按钮状态

我有这个标记：

<div class='A'>
    <input type='radio' name='B' class='B' />
</div>
<div class='A'>
    <input type='radio' name='B' class='B' />
</div>
<div class='A'>
    <input type='radio' name='B' class='B' />
</div>

小提琴：

代码的问题是，单击复选框时返回false。因此，您通过执行

返回false来间接执行
event.preventDefault（）
和
event.stopPropagation（）

只有在单击div时，您才需要将checked属性显式设置为true。但是，当您单击收音机时，它将执行默认操作。因此，您需要停止事件的传播


代码的问题是，单击复选框时返回false。因此，您通过执行
返回false来间接执行
event.preventDefault（）
和
event.stopPropagation（）

只有在单击div时，您才需要将checked属性显式设置为true。但是，当您单击收音机时，它将执行默认操作。因此，您需要停止事件的传播

我是否可以建议使用
label
元素而不是
div
s？您将获得相同的行为，根本不需要javascript。CSS会注意外观。我在你的小提琴上做了一个简单的改动，效果很好

我可以建议使用
标签
元素而不是
div
s吗？您将获得相同的行为，根本不需要javascript。CSS会注意外观。我在你的小提琴上做了一个简单的改动，效果很好


e.preventDefault（）禁用
单选按钮
单击
事件

$('input:radio').closest('div').on('click', function (e) {
    $('input:radio', this).prop('checked', true);
});


e.preventDefault（）禁用
单选按钮
单击
事件

$('input:radio').closest('div').on('click', function (e) {
    $('input:radio', this).prop('checked', true);
});

单选按钮中的
click
事件会冒泡到
div
，因此在这两种情况下都会触发回调。问题是您正在阻止默认操作，在单选按钮的情况下，默认操作正在被选中

如果单击的元素是单选按钮，则可以添加退出回调的条件：

$('input:radio').closest('div').on('click', function (e) {
    if ($(e.target).is('input')) {
        return;
    }

    if ($('input:radio', this).prop('checked') === true) {
        console.log("returning false");
        return false;
    }
    $('input:radio', this).prop('checked', true);
    console.log("Clicked : " + $(this).attr('class'));
});

单选按钮中的
单击事件将冒泡到
div
，因此在这两种情况下都会触发回调。问题是您正在阻止默认操作，在单选按钮的情况下，默认操作正在被选中

如果单击的元素是单选按钮，则可以添加退出回调的条件：

$('input:radio').closest('div').on('click', function (e) {
    if ($(e.target).is('input')) {
        return;
    }

    if ($('input:radio', this).prop('checked') === true) {
        console.log("returning false");
        return false;
    }
    $('input:radio', this).prop('checked', true);
    console.log("Clicked : " + $(this).attr('class'));
});

这个
$（'input:radio'）有什么问题。最近的（'div'）。在（'click'…）上。
？@user2516522。。检查已编辑的代码。。选择器没有问题。。我使用了
.A
，因为可以使用类直接选择div。我仍然无法通过直接单击单选按钮来检查单选按钮。很高兴能够提供帮助：）这个
$（'input:radio'）有什么问题。最近的（'div'）。单击（'click'…）
？@user2516522。。检查已编辑的代码。。选择器没有问题。。我使用了
.A
，因为可以使用类直接选择div。我仍然无法通过直接单击单选按钮来检查单选按钮。很高兴能够提供帮助：）@user2516522您有什么理由返回false？是的。如果已经检查了无线电，我不想触发ajax调用。。我确实在回调中进一步调用了ajax..我还没有发布here@user2516522有什么理由让你返回false吗？是的。如果已经检查了无线电，我不想触发ajax调用。。我确实在回调中有ajax调用。如果你直接点击收音机，我还没有在这里发布。。它确实选择了收音机。。但是，由于
return
调用，函数将无法进一步执行……您认为如何？如果您需要在函数中执行其他操作而不立即返回，请注意，如果
e.target
是输入，请不要阻止默认值或返回
false
。如果您直接单击收音机。。它确实选择了收音机。。但是，由于
return
调用，函数将不会进一步执行……您认为如何？如果您需要在函数中执行其他操作而不立即返回，请注意不要阻止默认值或返回
false
，如果
e.target
是输入。只需删除
return false
您需要了解
return false
意味着
e.preventDefault（）
和
e.stopPropagation（）
，因此您要同时停止这两种操作。为什么？只需删除
返回false
您需要了解
return false
意味着
e.preventDefault（）
和
e.stopPropagation（）
，因此您要同时停止这两种操作。为什么？杰夫曼的答案是正确的。它工作得很好。您不需要JavaScript。或者，您可以将现有的
div
s包装在
label
s中，因为
label
是内联的，所以它们将完全符合
div
的要求。Jeffman的答案是正确的。它工作得很好。您不需要JavaScript。或者，您可以将现有的
div
s包装在
label
s中，因为
标签是内联的，所以它们将完全符合
div
的要求。