JSFiddle - React, Tailwind, and code Playground

by Jeremy Bolanos

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<ul class="main">
    <li class="listItem">Bar
        <ul class="sub">
            <li class="listItem">
                <input type="checkbox" data-type="region" data-vendor="bar" data-region="sam" />Sam
                <ul class="sub">
                    <li type="listItem">
                        <input type="checkbox" data-type="market" data-vendor="bar" data-region="sam" data-market="dave" />Dave</li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="listItem">Foo
        <ul class="sub">
            <li class="listItem">
                <input type="checkbox" data-type="region" data-vendor="foo" data-region="ian" />Ian
                <ul class="sub">
                    <li class="listItem">
                        <input type="checkbox" data-type="market" data-vendor="foo" data-region="ian" data-market="rory" />Rory</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<br/>
<ul class="chart">
    <li>
        <input type="radio" name="chart-type" data-chart="bar" />Bar</li>
    <li>
        <input type="radio" name="chart-type" data-chart="pie" />Pie</li>
    <li>
        <input type="radio" name="chart-type" data-chart="line" />Line</li>
</ul>

CSS

ul {
    margin:0;
    padding:0;
}
li {
    list-style-type:none;
    padding:0;
    margin: 0;
}
ul.sub {
    margin-left:10px;
}

JavaScript

// example of what the obj should look like if all checkboxes are selected
var obj = {};
obj.bar = [];
obj.bar[0] = {};
obj.bar[0].foo = "sam";
obj.bar[0].fum = "dave";
obj.bar[1] = {};
obj.bar[1].foo = "ian";
obj.bar[1].fum = "rory";
console.log(obj);

// init our obj
var obj1 = {};

$('input[type="checkbox"]').click(function () {
    if ($(this).prop('checked')) {
        alert('checked');
    } else {
        alert('unchecked');
    }
});

function exists(obj, objs) {
    var objStr = JSON.stringify(obj);
    for (var i = 0; i < objs.length; i++) {
        if (JSON.stringify(objs[i]) == objStr) {
            return 1;
        }
    }
    return 0;
}