Build string map in JS from checkboxes using jquery

I'm still learning Jquery and am trying to figure out how to build a string containing some checkbox inputs and a parent title. I have a repeating table that is basically just a title wrapped in a tag and a list of inputs as children a few layers beneath that. I want to only grab h4 titles that have at least 1 child checkbox selected, and then the names of those checkboxes along with that h4 title. basically something like this:

{(h4 value1 here),
 ({selected checkbox name 1,
   selected checkbox name 2})
},
{(h4 value3 here),
 ({selected checkbox name 1,
   selected checkbox name 3})
}

Here's my current html for this table being built.

<div class="specialClass" id="categoryBox">
    <c:forEach items="${searchCategories}" var="cat">
        <div class="col4">
            <h4><span class="categorySpan">${cat.key.description}</span></h4>
            <p class="stack">
                <c:forEach items="${cat.value}" var="subCats">
                    <label>
                        <input class="cat" type="checkbox" name="searchCategoryBoxes" value="${subCats}"/>
                        ${subCats}
                    </label>
                </c:forEach>
            </p>
        </div>
    </c:forEach>
</div>

I'm able to add names/classes/IDs as needed, but am not really sure where to start. Any pointers on which articles to read to help me figure out jquery selectors? Or alternatively any pointers on how I can solve this problem? :)