Question

我有一个复选框列表，我正在尝试实现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，然后循环遍历它。但我没有任何与此相关的独立功能。

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

Answer 1

您也可以将ko.computed用于selectAll并取消选择。

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

Answer 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/

checkboxlist selectall使用Knockout

2 个答案: