单击父级时更改单选按钮状态答案

【问题标题】：change radio button state when parent is clicked单击父级时更改单选按钮状态
【发布时间】：2013-08-04 01:12:35
【问题描述】：

我有这个标记：

<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>

所需的功能是通过单击父 div 或单选输入本身来选择单选，如果已选中单选，则单击父将无效，即返回 false。

我已经改变了点击父级，但是当我点击单选按钮时，没有任何反应。我的方法有什么问题？

jQuery :

$('input:radio').closest('div').on('click', function (e) {
    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'));
});

小提琴：http://jsfiddle.net/pSSc9/1/

【问题讨论】：

只需删除 return false; jsfiddle.net/Palestinian/pSSc9/6 你需要了解 return false 的意思是 e.preventDefault() 和 e.stopPropagation()，所以你要停止两者。为什么？

标签： javascript jquery html input radio

【解决方案1】：

我可以建议使用label 元素而不是divs 吗？您将获得相同的行为，并且根本不需要 javascript。 CSS 会处理外观。我在你的小提琴中做了那个简单的改变，效果很好。

http://jsfiddle.net/jeffman/WQEDv/2/

【讨论】：

杰夫曼的答案是正确的。它工作得很好。那你就不需要 JavaScript 了。
或者，您可以将现有的divs 包装在labels 中，并且由于labels 是内联的，它们将完全符合div。

【解决方案2】：

$('.A').on('click', function (e) {
    if ($(e.target).is('.B')) {
        e.stopPropagation();
        // So that event does not bubble when radio is selected
    } else {
        if ($('input:radio', this).prop('checked') === true) {
            console.log("returning false");
            return false;
        }
        $('input:radio', this).prop('checked', true);
    }
    console.log("Clicked : " + $(e.target).attr('class'));
});

您的代码的问题是您在单击复选框时返回 false。所以你间接做event.preventDefault()和event.stopPropagation()做return false;

只有在单击 div 时，您才需要明确地将 checked 属性设置为 true。但是，当您单击收音机时，它会执行默认操作。所以你需要停止事件的传播。

Check Fiddle

【讨论】：

这个$('input:radio').closest('div').on('click'...)有什么问题？
@user2516522..检查编辑的代码..选择器没有问题..我使用.A，因为可以使用类直接选择div。
我仍然无法通过直接单击来选中单选按钮
很高兴有帮助:)

【解决方案3】：

DEMO

e.preventDefault(); 禁用radio 按钮click 事件

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

【讨论】：

@user2516522 你有什么理由返回false？
是的。如果已经检查了收音机，我不希望触发 ajax 调用..我确实在回调中有进一步的 ajax 调用..我没有在这里发布

【解决方案4】：

来自单选按钮的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'));
});

Working example

【讨论】：

如果你直接点击收音机..它确实选择了收音机..但是由于return调用，该功能将不会进一步执行.....你怎么看？
如果您需要在函数中执行其他操作并且不立即返回，请注意不要阻止默认或返回 false（如果输入为 e.target）。