JSFiddle - React, Tailwind, and code Playground

by Udhay

HTML

<!--<input type="checkbox" data-bind="checked: fruitGroup"/>
<label>Group</label>
-->
<hr/>

<div data-bind="foreach: { data: fruits, as: 'list' }">
    <div>
        <input type="checkbox" data-bind="checkedValue: list.name, checked: $root.selectedTasks, attr: {id: list.name}"/>
        <label data-bind="text: list.name, attr: {for: list.name}">Fruit</label>
    </div>    
</div>

JavaScript

function AppViewModel() {
    var that = this;
    this.selectedTasks = ko.observableArray();
    
    this.fruits = ko.observableArray([
        {name : 'Apple', selected : ko.observable(true)},
        {name : 'Banana', selected : ko.observable(true)},
        {name : 'Coconut', selected : ko.observable(false)}
    ]);
    
    
    
     this.selectedTasks.subscribe(function(newValue){
     	 console.log(newValue);
     })
    
    // Let's build a group checkbox that can be used to select / deselect all, and 
    // becomes selected when a child is selected
    /*this.fruitGroup = ko.computed({
        read : function() {
            // Get selected when dependent children are selected
            var someSelected = false;
            var fruitsArray = that.fruits();
            fruitsArray.forEach(function(fruit){
                if (fruit.selected()) {
                    someSelected = true;
                }         
            });
            return someSelected;
        },
        write : function(newState) {
            // If checked / unchecked, propagate this change to children. This isn't called if we're only
            // only checking the group checkbox because of a change to a dependent.
            var fruitsArray = that.fruits();
            fruitsArray.forEach(function (fruit){
                fruit.selected(newState);
            });
        }
    });*/
 
}
 
ko.applyBindings(new AppViewModel());