当取消选择一个或多个项目时，knockoutjs取消选择/选中所有复选框 [英] knockoutjs deselect/select all checkboxes when one or more items deselected

问题描述

这是类似的，但不同于围绕这个主题的其他问题。

我有一个表的记录列表，每个都有一个选择复选框。 p>

在表格标题中，我有一个全选复选框。

当用户选中/取消选中 选择/取消选择记录。

但是，当取消选择一个或多个记录时，我需要取消选中我的全选复选框。

我的标记：

 < table& 
< thead> 
< tr> 
< th>名称< / th> 
< th>< input type =checkboxdata-bind =checked：SelectAll/>< / th& 
< / tr> 
< / thead> 
< tbody data-bind =foreach：$ data.People> 
< tr> 
< td data-bind =text：Name>< / td> 
< td class =center>< input type =checkboxdata-bind =checked：Selected/>< / td> 
< / tr> 
< / tbody> 
< / table> 
  

我的脚本（编辑）：

  function MasterViewModel（）{
 var self = this; 
 
 self.People = ko.observableArray（）; 
 self.SelectAll = ko.observable（false）; 
 
 self.SelectAll.subscribe（function（newValue）{
 ko.utils.arrayForEach（self.People（），function（person）{
 person.Selected（newValue） ; 
}）; 
}）; 
} 
 
 
 my.Person = function（name，selected）{
 var self = this; 
 
 self.Name = name; 
 self.Selected = ko.observable（false）; 
} 
  

解决方案

http://jsfiddle.net/AneL9/

  self.SelectAll = ko.computed（{
 read：function（）{
 var item = ko.utils .arrayFirst（self.People（），function（item）{
 return！item.Selected（）; 
}）; 
 return item == null; 
}，
 write：function（value）{
 ko.utils.arrayForEach（self.People（），function（person）{
 person.Selected（value）; 
}）; 
} 
}）; 
 

但是当选择全部取消选择时会给你一个ordo n ^ 2问题，你可以使用pasuable计算

http://www.knockmeout.net/2011/04/pausing-notifications-in-knockoutjs.html

编辑：您可以也可以用节流器扩展计算，这样你避免ordo n ^ 2问题

  .extend（{throttle：1} ）
  

http://jsfiddle.net/AneL9/44/

This is similar to, but different from other questions around this topic.

I have a table with a list of records, each having a select checkbox.

In the table header I have a "Select All" checkbox.

When the user checks/unchecks "Select All" the records are selected/unselected. This works fine.

However, I need to deselect my "Select All" checkbox when one or more of the records are deselected.

My markup:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th><input type="checkbox" data-bind="checked: SelectAll" /></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: $data.People">
        <tr>
            <td data-bind="text: Name"></td>
            <td class="center"><input type="checkbox" data-bind="checked: Selected" /></td>
        </tr>
    </tbody>
</table>

My script (edited):

function MasterViewModel() {
    var self = this;

    self.People = ko.observableArray();
    self.SelectAll = ko.observable(false);

    self.SelectAll.subscribe(function (newValue) {
        ko.utils.arrayForEach(self.People(), function (person) {
            person.Selected(newValue);
        });
    });
}


my.Person = function (name, selected) {
    var self = this;

    self.Name = name;
    self.Selected = ko.observable(false);
}

解决方案

This works

http://jsfiddle.net/AneL9/

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

but will give you a ordo n ^ 2 problem when selecting deselecting all, you can use a pasuable computed to get around that

http://www.knockmeout.net/2011/04/pausing-notifications-in-knockoutjs.html

edit: You can also extend the computed with a throttle, this way you avoid the ordo n^2 problem

.extend({ throttle: 1 })

http://jsfiddle.net/AneL9/44/

这篇关于当取消选择一个或多个项目时，knockoutjs取消选择/选中所有复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！