使用Knockout JS的數據綁定複選框

我有一個HTML表格，其中有一列用於選中的行（在單元格中有一個複選框）。使用Knockout JS的數據綁定複選框

我使用敲除到所選擇的複選框綁定到與屬性ID可觀察到的陣列，如下所示。（這工作正常無需「選中」）

的NListTable是從可觀察到的陣列getJson（在返回時填充表）。我希望能夠在填充表後發佈選定的ID。

<thead> 
         <tr> 
          <th style=" text-align:center"><b>Generate Notice</b><input type="checkbox" data-bind="checked: SelectAll" /></th> 
          <th style=" text-align:center"><b>Name</b></th> 
          <th style=" text-align:center"><b>Application Number</b></th> 
          <th style=" text-align:center"><b>Right ID</b></th> 
         <th style=" text-align:center"><b> Division</b></th> 
         <th style=" text-align:center"><b>Use ID</b></th> 
    </tr> 
        </thead> 



     <tbody data-bind="foreach:NListTable"> 
        <tr> 

         <td style=" text-align:center"> 

          <input type="checkbox" data-bind="checked: Selected"> 
         </td> 
         <td style=" text-align:center"> 
          <p data-bind="text:Name"></p> 
         </td> 
         <td style=" text-align:center"> 
          <p data-bind="text:AppNum"></p> 
         </td> 
         <td style=" text-align:center"> 
          <p data-bind="text:ID"></p> 
         </td> 
         <td style=" text-align:center"> 
          <p data-bind="text:DivName"></p> 
         </td> 
         <td style=" text-align:center"> 
          <p data-bind="text:useID"></p> 
         </td> 
    </tr> 
        </tbody>

function RowData(Name, AppNum, ID, DivName, useID) { 
    var self = this; 

    self.Selected = ko.observable(true); 
    self.Name = ko.observable(Name); 
    self.AppNum = ko.observable(AppNum); 
    self.ID = ko.observable(ID); 
    self.DivName = ko.observable(DivName); 
    self.useID = ko.observable(useID); 

} 

self.NListTable = ko.observableArray([new RowData()]); 
//self.selectedThings = ko.observableArray([]); 

self.SelectAll = ko.computed({ 
    read: function() { 
     var item = ko.utils.arrayFirst(self.NListTable(), function (item) { 
      return !item.Selected(); 
     }); 
     return item == null; 
    }, 
    write: function (value) { 
     ko.utils.arrayForEach(self.NListTable(), function (rowData) { 
      rowData.Selected(value); 
     }); 
    } 
});

的getJSON

function (data) { 

       $("#nListTable").show(); 
       for (var i = 0; i < data.length; i++) { 
        if (data[i] != null) { 
         self.NListTable.push(RowData(data[i].FirstName + ' ' + data[i].LastName, data[i].AppPre + '-' + data[i].AppNum, data[i].ID, data[i].DivName, data[i].useID)); 
        } 
       } 

      });

我想選擇所有的複選框時使用「檢查」的HTML屬性在頁面加載，但這不起作用即使當我使用它時，我所有的複選框都未被選中。

如何預先選中所有複選框

來源

2015-02-09 sss111

你告訴我們「這工作正常」，但看着你的視圖代碼，我會懷疑它。你可以更新你的問題，幷包括你的情況的實際repro？最好使用Stack Snippet（請參閱編輯器工具欄）製作實際的可運行repro。 – Jeroen 2015-02-09 15:58:34

你應該有一個計算checkAll/Uncheck的權利？所以如果你試圖檢查負載，然後分配'true'給那個observable，然後檢查所有鏈接的計算。我在這裏猜測。如果你正在尋找一些比較差異更多的信息將不勝感激 – 2015-02-09 16:02:05

這件小提琴可能會有所幫助試試http://jsfiddle.net/supercool/AneL9/106/ – 2015-02-09 16:03:41

那麼你應該做這樣的事情

視圖模型：

self.SelectAll = ko.computed({ 
    read: function() { 
     var item = ko.utils.arrayFirst(self.NListTable(), function (item) { 
      return !item.Selected(); 
     }); 
     return item == null; 
    }, 
    write: function (value) { 
     ko.utils.arrayForEach(self.NListTable(), function (rowData) { 
      rowData.Selected(value); 
     }); 
    } 
});

工作撥弄here

來源

2015-02-12 10:50:06

使用Knockout JS的數據綁定複選框

回答

相關問題