JSFiddle - React, Tailwind, and code Playground

by Thor Arne Johansen

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<div data-bind="text:name"></div>
<div data-bind="foreach:schedule.options()">
    <label> <span data-bind="text: period"></span>  <span data-bind="text: time"></span>

        <input type="radio" data-bind="click: $root.selectedTime.bind($data, $parent), attr: {name: day}" />
    </label>
    <br />
</div>
<hr/>
<div data-bind="foreach: schedule.options()">
    <label> <span data-bind="text: selected"></span> 
    </label>
</div>

JavaScript

function Question() {
    var self = this;
    this.name = "Mandag";

    self.selectedTime = function (root, period) {

        // Find the day and time
        ko.utils.arrayForEach(self.schedule.options(), function (option) {
            if (option.day() == period.day() && option.period() == period.period() && option.time()==period.time()) {
                option.selected(true);
            }
            else
            {
                option.selected(false);
            }
        });
        return true;
    };


    var i = 0;
    this.schedule = ko.mapping.fromJS({
        options: [{
            day: "Mandag",
            period: "Formiddag",
            time: "Ingen transport",
            selected: false
        }, {
            day: "Mandag",
            period: "Formiddag",
            selected: false,
            time: "SFO"
        }, {
            day: "Mandag",
            period: "Formiddag",
            time: "Skole",
            selected: false
        }]
    });
}

debugger;
var vm = new Question();
ko.applyBindings(vm);