JSFiddle - React, Tailwind, and code Playground

by skiff

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.2.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<div class="check-block">
                    <input name="AllWeek" id="AllWeek" type="checkbox" value="AllWeek" data-bind="checked: AllCheck, click: selectAll" />
                    <label for="AllWeek">All Week</label>
                </div>
                <div class="holder">
                    <span>
                        <input name="Monday" id="Monday" type="checkbox" value="Mo" data-day="true" data-bind="checked: DaysOfWeekResult, click: dayClicked" />
                        <label for="Monday">Mo</label>
                    </span><span>
                        <input name="Tuesday" id="Tuesday" type="checkbox" value="Tu" data-day="true" data-bind="checked: DaysOfWeekResult, click: dayClicked" />
                        <label for="Tuesday">Tu</label>
                    </span><span>
                        <input name="Wednesday" id="Wednesday" type="checkbox" value="We" data-day="true" data-bind="checked: DaysOfWeekResult, click: dayClicked" />
                        <label for="Wednesday">We</label>
                    </span>
                </div>
                <div class="holder">
                    <span>
                        <input name="Thursday" id="Thursday" type="checkbox" value="Th" data-day="true" data-bind="checked: DaysOfWeekResult, click: dayClicked" />
                        <label for="Thursday">Th</label>
                    </span><span>
                        <input name="Friday" id="Friday" type="checkbox" value="Fr" data-day="true" data-bind="checked: DaysOfWeekResult, click: dayClicked" />
                        <label for="Friday">Fr</label>
                    </span><span>
                        <input name="Saturday" id="Saturday" type="checkbox" value="Sa" data-day="true"...

JavaScript

var serializedJsonString = '"AllCheck":false,"DaysOfWeekResult":[]}'

function AppViewModel() {
    this.EveryDayNumber = ko.observable("");

    //Week
    this.AllCheck = ko.observable(false);
    this.DaysOfWeekResult = ko.observableArray();
 
    this.selectAll = function () {
        if (this.AllCheck()) {
            fillDaysArray();
        }
        refreshCheckboxes();
        return true;
    };
}

var viewModel = new AppViewModel();
var viewModelDeserialized = ko.mapping.fromJSON(serializedJsonString, viewModel);
        
ko.applyBindings(viewModelDeserialized);