javascript - jQuery ui 可选择表来选择/取消选择复选框

Question

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

我确实已经输入了可选代码 -

$(函数() { $( "#selectable").selectable({ 过滤器:“.block” }) });

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

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

我的 Javascript 和 jQuery 知识有限，因此非常感谢任何有关如何实现此目标的指示。

Answer 1

做这样的事情怎么样:

$(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/