OJET: Select All options using only Checkboxset

This is an example on how to select all other options by using another oj-checkboxset.

GitHub: ojet-checkbockset-select-all

The idea is to keep track of the selection and make use of the on-value-changed as described in the following code.

self.colorOptions = ko.observableArray([
        { id: "blueopt", value: "blue", color: "Blue" },
        { id: "greenopt", value: "green", color: "Green" },
        { id: "redopt", value: "red", color: "Red" },
        { id: "limeopt", value: "lime", color: "Lime" },
        { id: "aquaopt", value: "aqua", color: "Aqua" },
      ]);

      self.selectAll = ko.observableArray([]);
      self.currentColor = ko.observableArray(["red"]);

      self.selectAllOptionChanged = (event) => {
        const newSelection = event.detail.value;
        if (newSelection.indexOf('all') == ! -1) {
          self.colorOptions().forEach(element => {
            self.currentColor.push(element.value);
          });
        } else {
          self.currentColor([]);
        }
      }

      self.singleOptionChanged = (event) => {
        if (event.detail.value.length === self.colorOptions().length) {
          self.selectAll(['all']);
        }
        else {
          self.selectAll([]);
        }
      }

When selecting / un-selecting options of the list then we have to make sure the total has been reached for mark / un-mark the Select All checkbox.

When selecting All / Un-selecting All we need to check which is the new status of the selection by consulting it in the event.detail.value, depending on the value then we load all selected values into our observableArray or just cleanup the selecction.