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/