使用 Knockout 的复选框列表全选答案

【问题标题】：checkboxlist selectall using Knockout使用 Knockout 的复选框列表全选
【发布时间】：2014-07-17 03:13:46
【问题描述】：

我有一个复选框列表，我正在尝试实现 SelectAll/DeselectAll 功能。复选框列表的项目正在从数据库中绑定。

这就是我的复选框列表的样子

<div class="options" 
     data-bind="foreach: Factor,visible: true" style="display: none;">
    <label>
        <input type="checkbox" class='roles' name='roles' 
            data-bind="attr: { value: Id }, 
                       checked:MyViewModel.MyData.MyCheckedValues" />
        <span data-bind="text: Name"></span>
    </label>
</div>

MyCheckedValues 和 Factor 在这里是可观察的数组。

这就是 MyData 的样子

MyData: function () {
    var currentObject = this;
    currentObject.MyCheckedValues= ko.observableArray()
}

selectAll: function()
{
    ko.utils.arrayForEach(); 
    return true;
}

在我发现的互联网文章中，使用了一个单独的函数，他们声明了一个名为 IsSelected 的属性并将其最初设置为 false 等，然后循环遍历它。但我没有任何与此相关的单独功能。

你能帮我实现全选/取消全选吗？

【问题讨论】：

标签： asp.net-mvc-4 knockout.js checkboxlist

【解决方案1】：

您也可以将 ko.computed 用于 selectAll 和 Deselect。

html:-

 <span data-bind="text: selectAll()?'Deselect All':'Select All'"></span><input type="checkbox" data-bind="checked: selectAll" />
 <div class="options" data-bind="foreach: Factor,visible: true" style="display: none;">
   <label>
    <input type="checkbox" class='roles' name='roles' data-bind="attr: { value: id },checked:isSelected" /> <span data-bind="text: name"></span>
  </label>
</div>

视图模型：-

 function Factor(id, name) {
    this.id = id;
    this.name = name;
    this.isSelected = ko.observable(false);
 }
function viewModel() {
  var currentObject = this;
  currentObject.Factor = ko.observableArray([new Factor(1, "Jack"), new Factor(2, "John")]);

  currentObject.selectAll = ko.computed({
    read: function () {
        var item = ko.utils.arrayFirst(currentObject.Factor(), function (i) {
            return !i.isSelected();
        });
        return item == null;
    },
    write: function (value) {
        ko.utils.arrayForEach(currentObject.Factor(), function (i) {
            i.isSelected(value);
        });
    }
  });
}
ko.applyBindings(new viewModel());

Working Fiddle

【讨论】：

【解决方案2】：

由于我看不到你的完整模型并且对你的绑定有点困惑，我为你做了一个简单的例子，你应该能够修改以供你使用。

标记：

<button data-bind="click: selectAllCheckboxes">Select all</button>
<button data-bind="click: deselectAllCheckboxes">Deselect all</button>
<ul data-bind="foreach: data">
    <li>
        <label>
            <input type="checkbox" data-bind="value: Id, checked: $parent.selectedCheckboxes">
            <span data-bind="text: Name"></span>
        </label>
    </li>
</ul>

还有 JS：

var myViewModel = function () {
    this.data = ko.observableArray( [
        { Id: 1, Name: 'Example 1' },
        { Id: 2, Name: 'Example 2' },
        { Id: 3, Name: 'Example 3' },
        { Id: 4, Name: 'Example 4' },
        { Id: 5, Name: 'Example 5' }
    ] );

    this.selectedCheckboxes = ko.observableArray();

    this.selectAllCheckboxes = function () {
        var selectedCheckboxesArray = this.selectedCheckboxes();
        selectedCheckboxesArray.length = 0;
        ko.utils.arrayForEach( this.data(), function ( data ) {
            selectedCheckboxesArray.push( '' + data.Id );
        } );
        this.selectedCheckboxes.valueHasMutated();
    };

    this.deselectAllCheckboxes = function () {
        this.selectedCheckboxes().length = 0;
        this.selectedCheckboxes.valueHasMutated();
    };
};

ko.applyBindings( new myViewModel() );

这是一个小提琴：http://jsfiddle.net/4VGGd/

【讨论】：