JSFiddle - React, Tailwind, and code Playground

by fergal_doyle

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		<button type="button" id="get">Get</button>
		<button type="button" id="set">Set</button>

<p>Send me spam:
    <input type="checkbox" data-bind="checked: wantsSpam" />
</p>
<div data-bind="visible: wantsSpam">Preferred flavor of spam:
    <div>
        <input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" />Cherry</div>
    <div>
        <input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" />Almond</div>
    <div>
        <input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" />Monosodium Glutamate</div>
</div>
<!--
<p>Send me spam:
    <input type="checkbox" data-bind="checked: wantsSpam" />
</p>
<div data-bind="visible: wantsSpam">Preferred flavors of spam:
    <div>
        <input type="checkbox" value="cherry" data-bind="checked: spamFlavors" />Cherry</div>
    <div>
        <input type="checkbox" value="almond" data-bind="checked: spamFlavors" />Almond</div>
    <div>
        <input type="checkbox" value="msg" data-bind="checked: spamFlavors" />Monosodium Glutamate</div>
</div>
-->

JavaScript

var viewModel = {
        wantsSpam: ko.observable(true),
        spamFlavor: ko.observable("almond") // Initially selects only the Almond radio button
    };

    // ... then later ...
    // viewModel.spamFlavor("msg"); // Now only Monosodium Glutamate is checked

    ko.applyBindings(viewModel);

   // viewModel.spamFlavor("msg");

    console.log(viewModel.spamFlavor())

/* 
    var viewModel = {
        wantsSpam: ko.observable(true),
        spamFlavors: ko.observableArray(["cherry", "almond"]) // Initially checks the Cherry and Almond checkboxes
    };

    // ... then later ...
 //   viewModel.spamFlavors.push("msg"); // Now additionally checks the Monosodium Glutamate checkbox
    
   ko.applyBindings(viewModel);

*/

$("#get").click(function(){

    console.log( viewModel.spamFlavor()  )

});