选择所有淘汰赛 JS 复选框

Posted 2023-03-27

【中文标题】选择所有淘汰赛 JS 复选框

【英文标题】：Select All Knockout JS Checkbox

【发布时间】：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.");
        
     

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

感谢大家的帮助。

【参考方案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>