Choose all the checkboxes that use Knockout JS

Question

Choose all the checkboxes that use Knockout JS

Struggling with implementing a "select all" checkbox feature as a Junior developer on a complex project utilizing knockout.Js and Typescript. I can't seem to figure out how to select all existing checkboxes.

Here is the HTML:

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

And here is the ViewModel code snippet:

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

I am attempting to create a straightforward "select all" checkbox functionality for all existing checkboxes.

Your support is greatly appreciated.

javascript typescript knockout.js

Answer 1

Answer №1

Providing an example that aligns perfectly with the code in your question is a bit tricky, but I can offer a simple implementation of select all functionality to guide you on how to integrate selectAll into your own solution.

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>

Answer 2

Providing an example that aligns perfectly with the code in your question is a bit tricky, but I can offer a simple implementation of select all functionality to guide you on how to integrate selectAll into your own solution.

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>

Choose all the checkboxes that use Knockout JS

Answer №1

Similar questions

How can I insert an HTML/PHP code snippet into a <ul> list using JavaScript?

The functionality to show the login status is currently malfunctioning

Querying the Collection for document counts is failing to display any data

What is the functionality of Google Chrome's "New Tab" iframes?

What is the best way to iterate through an array of arrays using a foreach loop to calculate the total number of specific properties?

Incorporating a pre-existing component into a Vue.JS template through an onclick event: How can this

When the properties change, React Router Redux does not get rendered

Displaying the Yii form directly on the page upon loading, rather than enclosed within a jQuery dialog box

What is the best method for communicating between windows in an electron application?

Recurly.js: Enhancing PHP Integration with Advanced Digital Signatures

Discovering if a page can be scrolled in Angular

How can we optimize ternary statements within ternary statements in Type Script and React Native for best practices?

Next.js Error: Unable to access the 'collection' property, as it is undefined

Creating interactive routes and pages using Next.js and Prisma, embracing dynamic functionality

Having trouble getting Node.js, express, socket.io, and ejs to work together?

Troubleshooting the lack of deep linking functionality in an AngularJS web application when using Node Express server

What is the best approach to managing a 204 status in Typescript in conjunction with the Fetch API

What causes Vue to only update once when there are two closely timed mutations to reactive data?

What is the proper way to include 'rowspan' specific CSS within an HTML table?

Extract attributes from a string of HTML containing name-value pairs