javascript 淘汰赛选中/取消选中所有组合框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9081546/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
knockout check/uncheck all combo box
提问by Arbejdsgl?de
I using knockout for mapping JSON obejct to user control, I have a list of single checkboxes, They look like
我使用淘汰赛将 JSON 对象映射到用户控件，我有一个单复选框列表，它们看起来像
<input type="checkbox" data-bind="checked: IsEnabled1" />
I Have JsonObject
我有 JsonObject
var viewModel = {
IsEnabled1 :ko.observable(true),
IsEnabled2 :ko.observable(true),
IsEnabled3 :ko.observable(false)
};
...
ko.applyBindings(viewModel);
And I want to add global check box that will be check/uncheck all other, I made this changes on JavaScript side but global check box update UI part but they data from separate check boxes doesn't mapping to JSON object .
我想添加将选中/取消选中所有其他复选框的全局复选框，我在 JavaScript 端进行了此更改，但全局复选框更新了 UI 部分，但它们来自单独复选框的数据不会映射到 JSON 对象。
Global checkbox
全局复选框
$("#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;
});
});
after this code my JSON object contain data that not related to UI.
在此代码之后，我的 JSON 对象包含与 UI 无关的数据。
How to update all JSON after change check boxes from JS side ?
从 JS 端更改复选框后如何更新所有 JSON？
回答by Romanych
Please check the example: http://jsfiddle.net/MenukaIshan/5gaLjh2c/
请检查示例：http: //jsfiddle.net/MenukaIshan/5gaLjh2c/
I think it is exactly what you need. All items have IsCheckedobservable property. ViewModel contains computed observable (readable and writeable) to check or uncheck all items.
我认为这正是你所需要的。所有项目都有IsChecked可观察的属性。ViewModel 包含计算的 observable（可读和可写）以检查或取消选中所有项目。
回答by Torbj?rn Nomell
There is an alternative solution here http://jsfiddle.net/rniemeyer/kXYuU/
这里有一个替代解决方案http://jsfiddle.net/rniemeyer/kXYuU/
The solution above can be improved in two ways
上述解决方案可以通过两种方式改进
-To make AllChecked false for empty lists, we need to check length
- 要使空列表的 AllChecked 为 false，我们需要检查长度
-To reduce the number recalculations when selecting all for a long list, we need to add throttle
-为了减少长列表选择全部时重新计算的次数，我们需要添加油门
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 });
