包装输入无线电上的 Jquery 事件覆盖“已检查”事件答案

【问题标题】：Jquery event on wrapped input radio override 'checked' event包装输入无线电上的 Jquery 事件覆盖“已检查”事件
【发布时间】：2011-07-03 01:21:39
【问题描述】：

我想在单击“td”时选中和取消选中（切换）收音机，但保留默认输入事件

<table>
   <tr>
      <td>
          <input type='radio'>
      </td>
   </tr>
</table>

我的代码尝试：

尝试 1： http://jsfiddle.net/UJXRu/

尝试 2： http://jsfiddle.net/UJXRu/1/

尝试 3： http://jsfiddle.net/UJXRu/2/

预览：

$("td").click(function(e) {
    if (!$(e.target).is("input")) {
        var bool = !$(this).children("input").is(':checked');
        $(this).children("input").attr("checked", bool)
    }
    else{
        var bool2 = !$(e.target).is(':checked');
        $(e.target).attr('checked',bool2);
    }
});

【问题讨论】：

不太了解您想要实现的目标。您想在单击 td 或单选按钮时检查单选按钮吗？您能否解释一下单击 td 和单击单选按钮时要发生的情况？谢谢。
我想在单击 td 或单选按钮时检查单选按钮
您希望单选按钮的行为类似于复选框吗？
嗯，对，这是一个复选框行为.. 好吧，忘了这个问题。我的坏

标签： jquery events click radio

【解决方案1】：

试试这个..

$("td").click(function(e) {
    if (e.target.type !== 'radio') {
        $(this).find(":radio").trigger('click');
    }
});

jsfiddle 上的示例。

如果你想让 td 和单选按钮切换选中的单选属性，你可以这样做：

$("td").toggle(function() {
    $(this).children(":radio").attr("checked", true);
}, function() {
    $(this).children(":radio").attr("checked", false);
});

jsfiddle 上的示例

【讨论】：

【解决方案2】：

回复您的评论：

“我想在单击 td 或单选按钮时检查单选按钮”

应该很简单：

$("td").click(function(e) {
    $(this).find("input").attr("checked", true);
});

http://jsfiddle.net/lukemartin/UJXRu/3/

【讨论】：

【解决方案3】：

此答案不将单选按钮视为复选框（用户真的不喜欢那样），并试图提供一个更现实的场景。

$("tr.myRow").click(function(e) {
    // dont override the radio inputs default
    if ($(e.target).hasClass("childRadio") || e.target.tagName == 'LABEL')
        return;

    // find the child radio, and if it's not checked, check it.
    var $childRadio = $("input.childRadio", $(this));
    if (!$childRadio.attr('checked')) {
        $childRadio.attr('checked', 'checked');
    }
});

我不厌其烦地添加标签，并使用了 name 属性来对单选按钮进行分组（这就是有单选按钮的原因）。因此，这会尽可能多地保留默认行为，并且只是增加点击次数以选择特定的子单选按钮。

html 示例如下。

<tr class="myRow">  
    <td>
        <div>Some Content</div>
        <div>
            <label for="radio1">Radio 1 Label</label>
            <input type='radio' id="radio1" class="childRadio" checked="checked" name="Group1">
        </div>
        <div>More Content</div>
    </td>
</tr>
<tr class="myRow">
    <td>
        <div>
            <label for="radio2">Radio 2 Label</label> 
            <input type='radio' id="radio2" class="childRadio" name="Group1">
        </div>
    </td>
</tr>

【讨论】：

【解决方案4】：

为什么不直接在输入标签上调用默认点击事件：

$(this).children("input").click();

【讨论】：