表格標題中的複選框檢查其他行中的所有複選框

Question

我在表格標題中有一個複選框來選擇/取消選擇表格中的所有複選框。我嘗試將更改/單擊事件綁定到該表格。相同的事件適用於其他複選框，但不適用於標題上的複選框。我正在使用MVC3 & KnockoutJS綁定。下面添加代碼部分。

<tr class="cont-subhead trClinicList"> 
    <th class="tWidth10 textAlign"> 
     <input type="checkbox" id="selectAllCb" data-bind="event:{ change:function(){$root.ClickSelectAll();return true;} }" /> 
</tr> 

的jQuery：

self.ClickSelectAll = function (data,event) { 
    alert("method hit"); 
    if ($('#selectAllCb').is(':checked')) { 
     for (var i = 0; i < self.AdminToolDetails().length; i++) { 
      if (self.AdminToolDetails()[i].IsEnabled() && self.AdminToolDetails()[i].IsSelected() == false) { 
       self.AdminToolDetails()[i].IsSelected(true); 
      } 
     } 
    } 

    else { 
     for (var i = 0; i < self.AdminToolDetails().length; i++) { 
      if (self.AdminToolDetails()[i].IsEnabled() && self.AdminToolDetails()[i].IsSelected()) { 
       self.AdminToolDetails()[i].IsSelected(false); 
      } 
     } 
    } 
}; 

請告訴我如何處理表頭輸入的複選框的事件。

Answer 1

哎呀！ 不要像這樣混合操作DOM和jQuery和Knockout。使用KnockoutJS，嘗試在視圖模型上運行所有邏輯和更改，並讓庫處理視圖中的更新/更新。

以下是如何與KO做到這一點：

var Item = function(name) { 
 
    this.name = name; 
 
    this.isSelected = ko.observable(false); 
 
}; 
 

 
var Root = function() { 
 
    var self = this; 
 
    
 
    self.items = ko.observableArray([new Item("Abc"), new Item("Xyz")]); 
 
    
 
    self.selectAll = ko.computed({ 
 
    read: function() { 
 
     return self.items().every(function(i) { return !!i.isSelected(); }) 
 
    }, 
 
    write: function(newVal) { 
 
     self.items().forEach(function(i) { i.isSelected(newVal); }); 
 
    } 
 
    }); 
 
}; 
 
           
 
ko.applyBindings(new Root());

th { border-bottom: 1px solid gray; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr class="cont-subhead trClinicList"> 
 
     <th> 
 
      <input type="checkbox" data-bind="checked: selectAll" /> 
 
     </th> 
 
     <th>Name</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: items"> 
 
    <tr> 
 
     <td class="tWidth10 textAlign"> 
 
      <input type="checkbox" data-bind="checked: isSelected" /> 
 
     </td> 
 
     <td data-bind="text: name"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

這一個使用a writable computed observable，這也可以讓你輕鬆地更新複選框（視圖）如果個別文本框獲得的（de）選擇。

我在示例中選擇了這種方法，因爲您最初使用的是change事件。不過，若你喜歡使用一個單擊處理程序，你可以做同樣的事情沿着這些路線：

var Item = function(name) { 
 
    this.name = name; 
 
    this.isSelected = ko.observable(false); 
 
}; 
 

 
var Root = function() { 
 
    var self = this; 
 
    
 
    self.items = ko.observableArray([new Item("Abc"), new Item("Xyz")]); 
 
    
 
    self.allSelected = ko.computed(function() { 
 
    return self.items().every(function(i) { return !!i.isSelected(); }) 
 
    }); 
 
    
 
    self.toggleAllSelected = function(viewModel, event) { 
 
    var newVal = !self.allSelected(); 
 
    self.items().forEach(function(i) { i.isSelected(newVal); }); 
 
    return true; // So the browser won't also handle "click" and uncheck the input again 
 
    }; 
 
}; 
 
           
 
ko.applyBindings(new Root());

th { border-bottom: 1px solid gray; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr class="cont-subhead trClinicList"> 
 
     <th> 
 
      <input type="checkbox" data-bind="checked: allSelected, click: $root.toggleAllSelected" /> 
 
     </th> 
 
     <th>Name</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: items"> 
 
    <tr> 
 
     <td class="tWidth10 textAlign"> 
 
      <input type="checkbox" data-bind="checked: isSelected" /> 
 
     </td> 
 
     <td data-bind="text: name"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

沒有任何地方需要DOM操作，這一切都是通過敲除（處理這就是它的主要用於）。增加的好處：您的視圖模型是高度可測試的（例如，爲selectAll等編寫單元測試很容易）。