使用jquery从复选框构建JS中的字符串映射

Question

我还在学习Jquery，并试图弄清楚如何构建一个包含一些复选框输入和一个父标题的字符串。我有一个重复的表，基本上只是一个包含在标签中的标题和一个输入列表，作为孩子下面的几层。我想只抓取至少选中了1个子复选框的h4标题，然后选中这些复选框的名称以及该h4标题。基本上是这样的：

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

这是我正在构建的这个表的当前html。

<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>

我可以根据需要添加名称/类/ ID，但我不确定从哪里开始。有关哪些文章可以帮助我找出jquery选择器的指针？或者我可以解决这个问题的任何指针？ :)

Answer 1

我使用了一些爸爸游戏的答案并对其进行了修改以获得以下内容：

var searchCategories =   
    $("input[name='searchCategoryBoxes']:checked")
        .parents('div[class="col4"]')
        .map(function(){
            var checked = false;
            var subCatStr = '{' + 
            $(this).find('input[type="checkbox"]:checked')
            .map(function() {
                checked = true; return this.value;
            }).get().join(',') + '}';
            if (checked) {
                var catStr = '{' + 
                $(this).find('span[class="categorySpan"]')
                .html() + ',' + subCatStr + '}';
                return catStr;
            }
            // should never get here
            return '';
    }).get().join(',');

在下面的html块上

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

这返回了我正在寻找的结果。