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

【问题标题】：Build string map in JS from checkboxes using jquery使用 jquery 从复选框在 JS 中构建字符串映射
【发布时间】：2017-12-20 23:31:54
【问题描述】：

我仍在学习 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 选择器的任何指针？或者关于如何解决这个问题的任何指示？ :)

【问题讨论】：

你可能需要调整这个： // 创建一个列表 var list = new Array(); // 查找所需容器内的所有容器 $('#categoryBox').find('div[class="col4"]').each(function(){ // 确定是否选中了任何复选框 var checked = false ; $(this).find('input[type="checkbox"]').each(function(){ if (!checked) { checked = $(this).is('checked'); } }); if (checked) { // 如果选中，则将子 H4 元素的标题添加到列表中 list.push($(this).find('h4').html()); } });

标签： javascript jquery html checkbox

【解决方案1】：

我使用了一些 daddygames 的答案并对其进行了修改以获得以下结果：

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>

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

【讨论】：