选择所有淘汰赛 JS 复选框答案

【问题标题】：Select All Knockout JS Checkbox选择所有淘汰赛 JS 复选框
【发布时间】：2020-08-28 07:01:59
【问题描述】：

我需要帮助女巫复选框全选，我是一名初级人员，正在从事一个同时使用 knockout.Js 和 Typescript 的大型项目。我不知道选择所有现有的复选框很热门。

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.");
        }
    }

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

感谢大家的帮助。

【问题讨论】：

标签： javascript typescript knockout.js

【解决方案1】：

我不完全确定如何为您提供一个适合您问题中的代码的示例。这是一个非常基本/简单的 select all 功能实现，它应该为您指明正确的方向，以便在您自己的解决方案中实现 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>

【讨论】：