JSFiddle - React, Tailwind, and code Playground

by Richard Collette

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css">
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<div class="answers">
<input name="q1" type="radio" id="a1"/><label for="a1"><img src="http://cdn1.iconfinder.com/data/icons/free-business-desktop-icons/128/Delivery.png" alt=""/><br/>label 1</label>
<input name="q1" type="radio" id="a2"/><label for="a2"><img src="http://cdn1.iconfinder.com/data/icons/free-business-desktop-icons/128/Delivery.png" alt=""/><br/>label 2</label>
</div>

<div class="answers" data-bind="foreach:answers">    
    <input name="q2" type="radio" data-bind="attr:{id:text},value:value,checked:$root.selectedValue()"/><label data-bind="attr:{'for':text}"><img src="http://cdn1.iconfinder.com/data/icons/free-business-desktop-icons/128/Delivery.png" alt=""/><br/><span data-bind="text:text"></span></label>
</div>
checked value=<span data-bind="text:selectedValue"></span>

CSS

body
{
    
}

p.question
{
    font-size:1.5em;
    font-weight:bold;    
}

div.answers{
    margin-bottom:1em;
    line-height: 1.5em;
}

div.answers label{
    margin-left:.5em;
}


input.answer{
    display:none;
}

JavaScript

function myFunc() {
    alert(this.value);
    return true;
}

function MyModel() {
    var self = this;
    
    var data = [{
        Id:1,
        text: "answer1",
        value: "value1"},
    {
        Id:2,
        text: "answer2",
        value: "value2"}];
                
    self.selectedValue = ko.observable('x');
    
    function updateQuestions(data) {
        //The following mapping allows the detection of new, modified and deleted objects by their appropriate key.
        var mapping = {            
            'answers': {
                key: function (data) {
                    return ko.utils.unwrapObservable(data.Id); //The id property of the answer
                }
            }
        };
        //Create a viewModel that contains observable properties created automatically from the returned JSON data.
        self.answers = ko.mapping.fromJS(data, mapping);
}
    
    updateQuestions(data);
    
}

$(document).ready(function() {
    ko.applyBindings(new MyModel());
    //$("div.answers").buttonset();
    //$("input:radio").on("click",myFunc);
});