使用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的数据绑定复选框

回答

相关问题