淘汰赛检查/取消选中所有combobox

我使用knockout将JSON obejct映射到用户控件，我有一个单独的复选框列表，它们看起来像

我有JsonObject

  var viewModel = { IsEnabled1 :ko.observable(true), IsEnabled2 :ko.observable(true), IsEnabled3 :ko.observable(false) }; ... ko.applyBindings(viewModel); 

我想添加将检查/取消选中所有其他的全局复选框，我在JavaScript端进行了此更改但是全局复选框更新了UI部分但是它们来自单独的复选框的数据没有映射到JSON对象。

全局复选框

  $("#GeneralTable thead tr th:first input:checkbox").click(function () { var checkedStatus = this.checked; $("#GeneralTable tbody tr td:first-child input:checkbox").each(function () { this.checked = checkedStatus; }); }); 

在此代码之后，我的JSON对象包含与UI无关的数据。

如何更新JS方面的更改后的所有JSON复选框？

Answer 1

请查看示例： http ： //jsfiddle.net/MenukaIshan/5gaLjh2c/

我认为这正是你所需要的。 所有商品都有IsChecked可观察的属性。 ViewModel包含用于检查或取消选中所有项的计算可观察（可读和可写）。

Answer 2

这里有另一种解决方案http://jsfiddle.net/rniemeyer/kXYuU/

上述解决方案可以通过两种方式进行改进

– 要使空列表的AllChecked为false，我们需要检查长度

– 为长列表选择全部时减少重新计算次数，我们需要添加限制

 self.AllChecked = ko.computed({ read: function() { var firstUnchecked = ko.utils.arrayFirst(self.Items, function(item) { return item.IsChecked() == false; }); return self.Items.length && !firstUnchecked; }, write: function(value) { ko.utils.arrayForEach(self.Items, function(item) { item.IsChecked(value); }); } }).extend({ throttle: 1 });