JQuery切换复选框使用表格单元格单击输入

我希望这样，如果单击表格单元格中的任何位置，单元格中的复选框都会被切换。如果直接单击复选框，它也应该正常工作

在这里，我使用了一个红色边框的空白“标签”作为可点击区域。理想情况下，我希望避免使用标签

如果返回false并单击该复选框，则该复选框将首先选中，然后当您关闭警报弹出窗口时，该复选框将再次清除。（至少在Chrome、Firefox和IE11中）

我用return false和no return尝试了这个。如果您单击单元格，它将工作，但如果您单击复选框，它将不工作

如果我在没有返回语句的情况下执行$elem.click（），它也会有同样的问题

如果我有“return false”，它根本不起作用：

因此，基本上我希望能够单击单元格中的任何位置，包括直接单击复选框来切换复选框。

找到了答案

试试这个

---

这是另一种选择

$(function(){
   $('td').click(function (event) {
     if (!$(event.target).is('input')) {
        var obj =$(this).find('input');      
        obj.prop('checked', !obj.is(':checked'));      
       }
   });
});

试试这个：

$('td, input').click(function (event) { // add input in the selector
    event.stopPropagation(); // stop the event bubble up
    var tgl = !$(event.target).is('input') && 
              !$('input:checkbox:checked', this).length ? true : false;
     // above we checked if target is not input and checked input is 
     // not there initially
    $('input:checkbox', this).prop('checked', tgl);
});  //---------------------------------------^^^---passing the boolean value

---

它只在一个函数中而不是在两个函数中，这很好。一行可以缩短为：var tgl=$（event.target）.is（'input'）&&$（'：选中此项）。长度@这只是为了可读性和删除此回复帖子中的滚动条。虽然演示只有一行，但我将“输入：复选框：选中”改为：“选中”，并删除了“？真：假”。

    $('td').click(function(){
        alert('click!');
        return false;

var $elem = $(this).find('input');
$elem.prop('checked', !$elem.prop('checked'));

$elem.click();

$('td').click(function (event) {
  if (!$(event.target).is('input')) {

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

$(function(){
    $('td').click(function(){
        //alert('click!');
        var $elem = $(this).find('input');
        $elem.prop('checked', !$elem.prop('checked'));
        //$elem.click();
//        return false;
    });
    $('input[type="checkbox"]').click(function(){
        $(this).prop('checked',!$(this).prop('checked'));
    })
});

$('td').click(function(){
    $(this).find(':checkbox').click();
});

$(":checkbox").click(function(e) {
     e.stopPropagation();        
});

$(function(){
   $('td').click(function (event) {
     if (!$(event.target).is('input')) {
        var obj =$(this).find('input');      
        obj.prop('checked', !obj.is(':checked'));      
       }
   });
});

$('td, input').click(function (event) { // add input in the selector
    event.stopPropagation(); // stop the event bubble up
    var tgl = !$(event.target).is('input') && 
              !$('input:checkbox:checked', this).length ? true : false;
     // above we checked if target is not input and checked input is 
     // not there initially
    $('input:checkbox', this).prop('checked', tgl);
});  //---------------------------------------^^^---passing the boolean value