Question

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

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

谢谢！

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

Answer 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()

Answer 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

Answer 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

jQuery单击td切换复选框

3 个答案: