JSFiddle - React, Tailwind, and code Playground

by mnahlovsky

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
Fruits
<div data-bind="foreach: options" >
    <div>
        <input type="checkbox" data-bind="attr: {value: value}, checked: $root.selectedFruit" />
        <span data-bind="text: label"></span>
    </div>    
</div>
<div>
    <input type="checkbox" data-bind="checked: $root.noneSelected, click:$root.reset"/>
    <span>None of the above</span>
</div>

<button data-bind="click: $root.reset">Reset</button>

JavaScript

//TODO: I want this array to 
var optionsList = [
    {"value": "a",
     "label": "apple"},
    {"value": "b",
     "label": "banana"},
    {"value": "c",
     "label": "carrot"},
    {"value": "d",
     "label": "donut"}
];

function viewModel() {
    var self = this;
    self.options = optionsList;
    self.selectedFruit = ko.observableArray(["a"]);
    self.selectedFruit.subscribe(function(newValue) {
        //alert(newValue);
    });
    self.noneSelected = ko.observable(false);
    
    self.reset = function() {
        self.selectedFruit.removeAll(["a", "b", "c", "d"]);
        return true;
    }  
}

ko.applyBindings(new viewModel());