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

为什么不在输入标记上调用默认的click事件：

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

包装输入无线电上的Jquery事件覆盖'已检查'事件

4 个答案: