jquery - 包装输入单选上的 Jquery 事件覆盖“已检查”事件

Question

我想在单击“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);
    }
});

Answer 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上的示例

Answer 2

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

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

Answer 3

回复您的评论：

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

应该很简单：

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

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

Answer 4

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

$("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>