JSFiddle - React, Tailwind, and code Playground

by cgough

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
<label>
      <input type="checkbox" data-bind="checked: selectAllCheck" />
      Select all
    </label>
<ol data-bind="foreach: items">
  <li>
    <label>
      <input type="checkbox" data-bind="checkedValue: itemValue, checked: $root.selectedItems" />
    </label>
  </li>
</ol>

JavaScript

var checkVm = function(data){
    this.itemValue = ko.observable(data);    
};

var viewModel = function() {
  this.items = ko.observableArray([]);
  this.selectedItems = ko.observableArray([]);
  this.selectAllCheck = ko.computed({
      read:function(){
        return this.selectedItems().length == this.items().length;
      },
      write: function(val){
        if(val)
           this.selectedItems(this.items().map(function(item){return item.itemValue();}))        
        else
           this.selectedItems.removeAll();   
      }, 
      owner:this
  });
}

ko.applyBindings(new viewModel());