Jquery无法在单击时选择和取消选择td

Question

我已经写了2个jquery函数。第1-11行是第一行，它在mousedown上绑定mouseover事件，以获得单击并拖动以选择td的效果(内部选中/取消选中复选框)。

第二个功能(12-20)是点击和取消点击单个td以选中和取消选中复选框。我可以按下鼠标并选择多个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});
    }
});
​