jQuery点击td切换复选框 [英] jQuery click on td to toggle checkbox

问题描述

如标题所示，我希望能够点击表格td 或的复选框，以打开或关闭复选框。下面的解决方案，当点击td，但由于某些原因，当你点击复选框没有什么发生。关于这里发生什么的任何想法？

As the title suggests, I want to be able to click on a table td OR the checkbox itself to toggle a checkbox on or off. The solution below works when clicking on the td, but for some reason when you click on the checkbox nothing happens. Any ideas as to what is going on here?

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

谢谢！

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

推荐答案

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

It's because the <input> checkbox is inside the <td> and you have attached click event to the <td>

如果没有输入复选框，则需要处理。

to overcome this, Check for the target type and if it's not input checkbox, you need to process it.

DEMO

DEMO

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

指

event.target

event.target

jQuery.is（）

jQuery.is()

这篇关于jQuery点击td切换复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！