最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - knockoutjs deselectselect all checkboxes when one or more items deselected - Stack Overflow

programmeradmin3浏览0评论

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 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);
}
Share Improve this question edited Feb 20, 2013 at 13:03 dzavala 98810 silver badges21 bronze badges asked Feb 20, 2013 at 12:38 WazygooseWazygoose 651 silver badge5 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 6

This works

http://jsfiddle/AneL9/

self.SelectAll = ko.puted({
    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 puted to get around that

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

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

.extend({ throttle: 1 })

http://jsfiddle/AneL9/44/

You should make SelectAll puted observable like this:

self.SelectAll = ko.puted({
    read: function() {
        var persons = self.People();
        for (var i = 0, l = persons.length; i < l; i++)
            if (!persons[i].Selected()) return false;
        return true;
    },
    write: function(value) {
        ko.utils.arrayForEach(self.People(), function(person){
            person.Selected(value);
        });
    }
});

and strip SelectAll.subscribe out.

http://jsfiddle/Yqj59/

发布评论

评论列表(0)

  1. 暂无评论