JSFiddle - React, Tailwind, and code Playground

by woozyking

HTML

<div class="container">
    <div class="row">
        <div class="col-xs-4" id="cc">
            <div class="checkbox">
                <label>
                    <input type="checkbox" value="1857500" data-name="Arts &amp; Entertainment">Arts &amp; Entertainment</label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" value="1857508" data-name="Automotive">Automotive</label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" value="1857532" data-name="Business">Business</label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" value="1857545" data-name="Careers">Careers</label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" value="1857557" data-name="Education">Education</label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" value="1857573" data-name="Family &amp; Parenting">Family &amp; Parenting</label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" value="1857583" data-name="Health &amp; Fitness">Health &amp; Fitness</label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" value="1857629" data-name="Food &amp; Drink">Food &amp; Drink</label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" value="1857648" data-name="Hobbies &amp; Interests">Hobbies &amp; Interests</label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" value="1857680" data-name="Home &amp; Garden">Home &amp; Garden</label>
            </div>
          ...

JavaScript

var checkedIAB = {}; // this will be ideally a part of rivets binding

$('#cc .checkbox input:checkbox').on('change', function (e) {
    if (this.checked) {
        checkedIAB[this.value] = {
            "parent_name": $(this).data('name'),
                "parentChecked": true
        };
    } else {
        delete checkedIAB[this.value];
    }

    $('#json-view').text(JSON.stringify(checkedIAB));
});

$('#cc .checkbox input:checkbox').each(function (index, el) {
    el.checked = true;
    checkedIAB[el.value] = {
        "parent_name": $(el).data('name'),
            "parentChecked": true
    };
});

$('#json-view').text(JSON.stringify(checkedIAB));