Knockout.js 取消选择/取消选择全部并获取选定的行值

我正在尝试使用knockout创建select/unselectall，并获取要保存的选定行的值

我可以让selectall和unselectall工作，但不确定如何获取所选行的数据

此外，如果选中行复选框，则选中或取消选中每行复选框。如果取消选中复选框，我希望取消选中“全选”复选框

到目前为止，我所做的一切都是我自己创造的

这是我的代码：

<div style="height:40px">Results</div>
<div id="results" style="display:none" data-bind="visible: showResults">
    <table width="100%" id="tblSearchResults" data-bind="visible: SearchResults().length>0">
        <thead>
            <tr>
                <th align="left">Name</th>
                <th>Gender</th>
                <th align="left">DOB</th>
                <th align="left">Join Date</th>
                <th style="width:26px">
                    <input type="checkbox" data-bind="checked: allSelected" />
                </th>
            </tr>
        </thead>
        <tbody id="EmpResults" data-bind="template: { name:'TmplSearchResults', foreach: SearchResults }"></tbody>
    </table>
</div>

结果
名称
性别
出生日期
加入日期

模板

<script type="text/html" id="TmplSearchResults">
    <tr style = "border-bottom: 1px solid #CCC;"> 
        <td valign = "middle" data-bind="text: name"> </td>
       <td valign="middle" align="center" data-bind="text: gender"></td > 
        <td valign = "middle"   data-bind = "text: dob" ></td> 
     <td valign="middle" data-bind="text: joindate"></td > 
        <td valign = "middle" > 
            <input type = "checkbox" data-bind = "checked:$parent.isSelected" > 
                </td> 
    </tr>
</script>

查看模型和数据

var vmSearchResult;
var vmSearchResultsModel = function () {
    var self = this;
    self.showResults = ko.observable(false);
    self.SearchResults = ko.observableArray([]);
    self.isSelected = ko.observable(false); // check box
    self.allSelected = ko.observable(false); // all select checkbox

    self.allSelected.subscribe(function (newValue) {

        ko.utils.arrayForEach(vmSearchResult.SearchResults(), function (PartnerSearch) {
            vmSearchResult.isSelected(newValue);  //<== here I get the selected values need the whole row

        });
    });
}

    function ShowData() {
    vmSearchResult.SearchResults(fakeData);
        vmSearchResult.showResults(true);

    }

$(document).ready(function () {
    vmSearchResult = new vmSearchResultsModel();
    ko.applyBindings(vmSearchResult, document.getElementById("results"));
    ShowData();
});
//Fake data  
var fakeData = [{
    "name": "Adrian D'Costa",
        "dob": "25-10-1984",
        "gender": "M",
        "joindate": "30-12-2004"
}, {

    "name": "Janet D'Curz",
        "dob": "30-08-1992",
        "gender": "F",
        "joindate": "15-12-2005"
}];

var-vmSearchResult；
var vmSearchResultsModel=函数（）{
var self=这个；
self.showResults=ko.可观察（假）；
self.SearchResults=ko.observearray（[]）；
self.isSelected=ko.observable（false）；//复选框
self.allSelected=ko.observable（false）；//所有选择复选框
self.allSelected.subscribe（函数（newValue））{
ko.utils.arrayForEach（vmSearchResult.SearchResults（），函数（PartnerSearch）{
vmSearchResult.isSelected（newValue）；//您将希望对allSelected属性使用一个值，而不是一个普通的可观察值

在写入计算的可观察对象时，现在可以管理每行的选定状态

例如：

self.allSelected = ko.computed({
    read: function () {
        var firstUnchecked = ko.utils.arrayFirst(self.searchResults(), function (item) {
            return item.isSelected() == false;
        });
        return firstUnchecked == null;
    },
    write: function (value) {
        ko.utils.arrayForEach(self.searchResults(), function (item) {
            item.isSelected(value);
        });
    }
}).extend({ rateLimit: 1 });

使用这种方法，您将不再需要订阅所有选定项的更改

当项目列表增长到任何显著大小时，需要使用扩展器来避免性能缓慢。rateLimit扩展器是在KO 3.1中添加的，您的小提琴参考2.3。我提供的小提琴使用3.2

仅供参考，这种方法假设每行都有一个isSelected observable属性。您的示例中没有这个属性。在附件中，您可以看到我是如何添加它的


演奏小提琴：




退房。谢谢。你的小提琴可以按我的要求工作。我会在我的应用程序中试用，并让你知道。我正在我的应用程序中使用3.1。我链接的小提琴是旧的：）我试过你的小提琴，但不知怎么的，它并没有选择全部。我也不确定你的意思是，我没有为每一行指定一个可观察的isSelected。我假设如果我在viewmodel中声明它，它的意思是相同的。我有这个self.isSelected=ko.observable（false）；对于每一行，我都使用$parent.isSelected引用它。我假设您指的是其他内容。计算结果显示在read-return项中未定义。isSelected（）===false；此行您对isSelected进行编码的方式导致在根vm上存在isSelected可观察的单个实例。$parent.isSelected绑定为表中的每一行引用了该单个实例，这反过来会导致在单击单个行时选中/取消选中每一行。