Select 所有 Knockout JS 复选框

Question

我需要帮助 checkbox select 全部，我是一名大三学生，正在从事一个同时使用 knockout.Js 和 Typescript 的大型项目。我无法弄清楚 select 所有现有的复选框。

Html:

<td>
     <input type="checkbox" data-bind="attr: { value: transactionId }, checked: 
     $parent.includedTransactions" />
</td>

视图模型：

public includedTransactions = ko.observableArray<number>();

    public moveMultipleTransactions = (transactionViewer: TransactionViewer) => {

        var cannotMoveTransaction = false;

        ko.utils.arrayForEach(this.includedTransactions(), (item) => {
            var transaction = ko.utils.arrayFirst(this.transactions(), function (t) {
                return item.toString() === t.transactionId.toString();
            });

            if (transaction.cannotMoveTransaction) {
                cannotMoveTransaction = true;
                return false;
            }
        });

        if (!cannotMoveTransaction) {
            let mmc = new MoveMultipleChargeViewModel(this.id, this.isReservationItem, this.includedTransactions());
            if (transactionViewer) {
                if (transactionViewer.isReservationItem) {
                    mmc.toDestination("item");
                    mmc.reservationItem(transactionViewer.reservationObject);
                }
                else {
                    mmc.toDestination("");
                    mmc.reservation(transactionViewer.reservationObject);
                }
            }
            this.moveMultipleCharges(mmc);
        } else {
            this.notifier.error("Error", "Once a transaction has been voided, it cannot be moved.");
        }
    }

我正在尝试做一个简单的复选框，它将 select 所有现有的复选框。

感谢大家的帮助。

Answer 1

我不太确定如何给你一个适合你问题中的代码的例子。这是 select 所有功能的 basic/simplistic 实现，应该为您指明正确的方向，以在您自己的解决方案中实现 selectAll。

function Vm() {
  var self = this;
  self.selectAll = ko.observable(false);
  self.myList = ko.observableArray([
    {name: ko.observable('Test 1'), selected: ko.observable(false)},
    {name: ko.observable('Test 2'), selected: ko.observable(false)},
    {name: ko.observable('Test 3'), selected: ko.observable(false)},
    {name: ko.observable('Test 4'), selected: ko.observable(false)},
    {name: ko.observable('Test 5'), selected: ko.observable(false)},
    {name: ko.observable('Test 6'), selected: ko.observable(false)},
    {name: ko.observable('Test 7'), selected: ko.observable(false)},
    {name: ko.observable('Test 8'), selected: ko.observable(false)}
  ]);

  self.toggleSelection = function(value) {
    self.myList().forEach(x => x.selected(value));
  }
  self.selectAll.subscribe(function(newValue) {
    self.toggleSelection(newValue);
  });
}

var vm = new Vm();
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<label>
      <input type="checkbox" data-bind="checked: selectAll"><span>Select All</span>       </label>

<ul data-bind="foreach: myList">
  <li>
    <label>
      <input type="checkbox" data-bind="checked: selected"><span data-bind="text: name"></span>       </label>
  </li>
<ul>

Select 所有 Knockout JS 复选框

Select All Knockout JS Checkbox

javascript

knockout.js

typescript