JSFiddle - React, Tailwind, and code Playground

by fergal_doyle

HTML

<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);


/*
    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
    
    */