jQuery点击td切换复选框

jQuery click on td to toggle checkbox

本文关键字：复选框 td 点击 jQuery      更新时间：2023-09-26

正如标题所示，我希望能够点击表格td或复选框本身来打开或关闭复选框。下面的解决方案在点击td时有效，但由于某些原因，当你点击复选框时什么都不会发生。有什么关于这里发生了什么的想法吗？

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

谢谢！

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

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

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

演示

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

参考

事件.target

jQuery.is((

我不知道你的代码的上下文，但你真的不需要任何jQuery/JavaScript。这可以简单地通过添加标签元素来完成：

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;
}

请参阅演示

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

相关文章：