Jquery无法选择和取消选择一个td点击它

Question

我写了2个jQuery函数。第1-11行是第一个绑定mousedown上的mouseover事件以获得点击和拖动效果以选择td（内部检查/取消选中复选框）的行为。

第二个功能（12-20）是在单个td上单击并取消选中以选中和取消选中复选框。我可以做mousedown并选择多个td，但我无法点击并单击td。我不确定问题在哪里？任何建议表示赞赏。

下面是代码：

$("#tbl td").mousedown(function() { 
    $("#tbl td").bind('mouseover', function() { 
     var checkbox = $(':checkbox', this)[0]; 
     $(this).css({ 
      'background': (checkbox.checked ? 'white' : '#6D7B8D') 
     }); 
     checkbox.checked = !checkbox.checked; 
    }); 
    $(this).mouseover(); 
}).mouseup(function(event) { 
    $("#td").unbind('mouseover'); 
    event.preventDefault(); 
    event.stopPropagation(); 
}); 

$('#tbl td').click(function(e) { 
    if ($(this).find('input:checkbox').is(':checked')) { 
     $(this).find('input:checkbox').attr("checked", ""); 
     $(this).css({ 
      background: "white" 
     }); 
    } else { 
     $(this).find('input:checkbox').attr("checked", "checked"); 
     $(this).css({ 
      background: "#6D7B8D" 
     }); 
    } 
});​ 

感谢

Answer 1

好了，我不知道如果这是你到底需要，但也许会有所帮助。

（只知道，它会如果你把HTML代码是很有益的！）

现场演示：http://jsfiddle.net/oscarj24/TATg7/

代码：

$('#tbl').on('mousedown, mouseover, mouseup, click', 'td', function(e) { 
    if(e.type == 'mousedown'){ 
     $(this).mouseover(); 
    } else if(e.type == 'mouseover'){ 
     var checkbox = $('input:checkbox'); 
     $(this).css({'background': (checkbox.is(':checked') ? 'white' : '#6D7B8D')}); 
     checkbox.prop('checked', !checkbox.checked);  
    } else if(e.type == 'mouseup'){ 
     $(this).unbind('mouseover'); 
     e.preventDefault(); 
     e.stopPropagation(); 
    } else if(e.type == 'click'){ 
     var checked = $('input:checked').is(':checked'); 
     checked ? background = 'white' : background = '#6D7B8D'; 
     $('input:checked').prop('checked', !checked); 
     $(this).css({background: background}); 
    } 
}); 
​