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

Question

我想建立一个表格网格，它代表每周的每一天每小时的块。然后我想要做的是让表格中的每个单元格都可选，并勾选一个复选框，如果选中了这个单元格，或者选择了多个单元格，然后勾选每个单元格对应的所有复选框。我在这里汇总了一个简化版本：http://jsfiddle.net/yxAjx/4/。

我真的得尽可能把在可供选择的代码 -

$(function() { $("#selectable").selectable({ filter: ".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'); 
     } 
    }); 
}); 

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