0

我写了 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"
        });
    }
});​

谢谢

4

1 回答 1

0

好吧，我不确定这是否是您真正需要的，但也许可以提供帮助。

（只是要知道，如果你把 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});
    }
});
​
于 2012-08-15T22:14:44.260 回答