Question

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

我真的得到了可选择的代码 -

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

例如，如果我点击并拖动“Tue”行中的前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');
        }
    });
});

DEMO：http://jsfiddle.net/dirtyd77/yxAjx/9/

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

1 个答案: