jQuery点击td来切换复选框答案

【问题标题】：jQuery click on td to toggle checkboxjQuery点击td来切换复选框
【发布时间】：2014-05-13 08:29:16
【问题描述】：

正如标题所暗示的，我希望能够单击表格 td 或复选框本身来打开或关闭复选框。下面的解决方案在单击 td 时有效，但由于某种原因，当您单击复选框时没有任何反应。关于这里发生了什么的任何想法？

$('td').click(function (e) {
    // Toggle checkbox
    $('input:checkbox', this).prop('checked', function (i, value) {
        return !value;
    });
});

谢谢！

http://jsfiddle.net/Littlebob/56CnR/

【问题讨论】：

你已经有什么代码了？
见jsfiddle.net/arunpjohny/vmQ6e/1
抱歉，添加了代码和 jsfiddle 链接

标签： javascript jquery html checkbox

【解决方案1】：

这是因为<input> 复选框位于<td> 内，并且您已将点击事件附加到<td>

为了克服这个问题，检查目标类型，如果它不是输入复选框，你需要处理它。

DEMO

$('td').click(function (event) {
    if (!$(event.target).is('input')) {
       $('input:checkbox', this).prop('checked', function (i, value) {
        return !value;
       });
    }
});

参考

event.target

jQuery.is()

【讨论】：

【解决方案2】：

我不知道你的代码的上下文，但你真的不应该在这里需要任何 jQuery/JavaScript。这可以通过添加label element 来完成：

HTML

<table>
    <tr>
        <td>
            <label><input type="checkbox" name="something" value="0"/></label>
        </td>
    </tr>
</table>

CSS

td {
    background-color: #eee;
}

label {
    padding: 20px;
    cursor: pointer;
    display: block;
}

See the demo

【讨论】：

谢谢，你可能是对的，但我认为我没有/不能在这里使用标签是有原因的。

【解决方案3】：

$(document).ready(function () {
$(document).on('click', 'tbody td', function (e) {
    e.stopPropagation();
    var checked= $(this).find('input[type="checkbox"]');
    checked.prop('checked', !checked.is(':checked'));
    $(this).toggleClass('selected'); // or anything else for highlighting purpose
});
$(document).on('click', 'input[type="checkbox"]', function (e) {
    e.stopPropagation();
    $(this).parent().toggleClass('selected'); // or anything else for highlighting purpose
});
});

检查这个JSFiddle

【讨论】：