JSFiddle - React, Tailwind, and code Playground

by Sandeep Kumar

HTML

<table>
    <thead>
        <tr>
            <th><input type="checkbox" data-bind="checked: SelectAll" /> Select All Countries</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: $data.Countries">
        <tr>
            <td>
              <input type="checkbox" data-bind="checked: Selected" />
              <label data-bind="text: CountyName"></label>
            </td>
        </tr>
    </tbody>
</table>

JavaScript

function CheckViewModel() {
    var self = this;

    self.Countries = ko.observableArray(
    							[
                    new Country("Australia"),
                  	new Country("India"),
                  	new Country("Russia"),
                    new Country("United Kingdom"),
                    new Country("United States")
                  ]);
    
    self.SelectAll = ko.computed({
        read: function() {
            var country = ko.utils.arrayFirst(self.Countries(), function(ctr) {
                return !ctr.Selected();
            });
            return country == null;           
        },
        write: function(value) {
            ko.utils.arrayForEach(self.Countries(), function (ctr) {
                ctr.Selected(value);
            });
        }
    }).extend({ throttle: 1 });
}


Country = function (name) {
    this.CountyName = name;
    this.Selected = ko.observable(false);
}

ko.applyBindings(new CheckViewModel());