JSFiddle - React, Tailwind, and code Playground

by Saeed Abbaspour

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<div id="results" class="jumbotron">
    <!-- ko if : optionRadio -->
    <ul data-bind="text: input1"></ul>
    <ul data-bind="text: input2"></ul>
    <ul>
        <!-- ko if : input3 -->
        <li data-bind="text : input3"></li>
        <!-- /ko -->
        <!-- ko if : input4 -->
        <li data-bind="text : input4"></li>
        <!-- /ko -->
    </ul>
    <ul data-bind="text: selectedOptionValue"></ul>
    <!-- /ko -->
    <!-- ko if : option2 -->
    <!-- /ko -->
    <!-- ko if : option2 -->
    <!-- /ko -->
</div>

<hr>
<form>
    <div class="form-group">
        <div class="radio">
            <label>
                <input type="radio" name="optionRadio" value="option1" data-bind="checked: optionRadio" />Option 1
            </label>
            <div class="jumbotron">
                <div class="form-group">
                    <label>Input 1</label>
                    <input data-bind="textInput: input1" type="text" class="form-control" />
                </div>
                <div class="form-group">
                    <label>Input 2</label>
                    <input data-bind="textInput: input2" type="text" class="form-control" />
                </div>
                <div class="checkbox">
                    <label>
                        <input data-bind="checked: input3" type="checkbox" />option 1</label>
                </div>
                <div class="checkbox">
                    <label>
                        <input data-bind="checked: input4" type="checkbox" />option 2</label>
                </div>
                <select data-bind="options: optionValues, value: selectedOptionValue"></select>
            </div>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="optionRadio" value="option2" data-bind="checked: optionRadio" />Option 2
            </label>
            <ul>Some content...

CSS

li {
    list-style: none;
}

JavaScript

var viewModel = {
    optionRadio: ko.observable("option1"),
    input1: ko.observable(),
    input2: ko.observable(),
    input3: ko.observable(false),
    input4: ko.observable(false),
    optionValues: ["Alpha", "Beta", "Gamma"],
    selectedOptionValue: ko.observable("Gamma")
};

ko.applyBindings(viewModel);

var jsonData = ko.toJSON(viewModel);