JSFiddle - React, Tailwind, and code Playground

by ryanbrill

HTML

<ul class="parent">
    <li><input type="checkbox" name="category" value="cat1" checked="checked" />
        <ul>
            <li>
                <input type="checkbox" name="sub-category"  value="subcat1" checked="checked" />
            </li>
        </ul>
    </li>
    <li><input type="checkbox" name="category" value="cat2" checked="checked" /></li>
    <li><input type="checkbox" name="category" value="cat2" /></li>
</ul>

<div class="myform">
    <input type="text" name="test" value="test value" />
    <input type="text" name="test2" value="test value 2" />
</div>

<input type="text" name="test3" value="test value 3" />

JavaScript

data = [];

opts = {};
//opts.additional = {'category':'value','category':'value2'};
opts.additional = $("ul.parent").find(":input").serializeArray();

console.log(opts.additional);

for(i=0;i<opts.additional.length;i++) {
    data.push(opts.additional[i]);
}

if (opts.additional) {
    for (var key in opts.additional) {
        data.push(
        /*    {
            name: key,
            value: opts.additional[key]
        }*/
        );
    }
}

console.log(data);