2

我正在尝试构建一个表格网格，它代表一周中每一天的每小时块。然后我想做的是使表格中的每个单元格都可以选择，如果选择了该单元格，或者如果选择了多个单元格，则选中一个复选框，然后勾选每个单元格对应的所有复选框。我在这里整理了一个简化版本：http: //jsfiddle.net/yxAjx/4/。

我真的可以输入可选择的代码 -

$(function() { $( "#selectable" ).selectable({ filter: ".block" }) });

例如，如果我单击并拖动“星期二”行中的前 2 个单元格，我希望选中相应的复选框。

包含我无法控制的复选框的表，因为这部分 html 是从我正在使用的软件生成的，但我在示例中复制了它的布局。

我的 Javascript 和 jQuery 知识是有限的，所以会很感激任何关于如何实现这一点的指针。

4

1 回答 1

3

做这样的事情怎么样：

$(function() {
    $( "#selectable" ).selectable({
        filter: ".block",
        selected: function( event, ui ) {
            var row = $(ui.selected).parents('tr').index(),
                col = $(ui.selected).parents('td').index();
            $('#checks').find('tr').eq(row)
                        .children('td').eq(col)
                        .children('input').addClass('checked').prop('checked', true);
            $('#checks input:not(.checked)').prop('checked', false);
        },
        unselected: function( event, ui ) {
            var row = $(ui.unselected).parents('tr').index(),
                col = $(ui.unselected).parents('td').index();
            $('#checks').find('tr').eq(row)
                        .children('td').eq(col)
                        .children('input').removeClass('checked').prop('checked', false);
        }
    });

    $('#checks input').click(function(){
        var row = $(this).parents('tr').index(),
            col = $(this).parents('td').index();
        if($(this).prop('checked')){
             $('#selectable').find('tr').eq(row)
                        .children('td').eq(col)
                        .children('div').addClass('ui-selected');
        }else{
             $('#selectable').find('tr').eq(row)
                        .children('td').eq(col)
                        .children('div').removeClass('ui-selected');
        }
    });
});

演示：http: //jsfiddle.net/dirtyd77/yxAjx/9/

于 2013-03-01T00:02:32.743 回答