如果选中了组中的复选框，则显示该组复选框

Question

我想做的是，如果预先选中组中的任何复选框，则在页面加载时显示组中的复选框。

这里是 HTML:

<ul>
<li class="header">
    <h3>Group 1</h3>
</li>
<li class="option">
    <label><input type="checkbox" /> Value</label>
</li>
<li class="option">
    <label><input type="checkbox" checked="checked" /> Value</label>
</li>
<li class="option">
    <label><input type="checkbox" /> Value</label>
</li>
<li class="header">
    <h3>Group 2</h3>
</li>
<li class="option">
    <label><input type="checkbox" /> Value</label>
</li>
<li class="option">
    <label><input type="checkbox" /> Value</label>
</li>
<li class="option">
    <label><input type="checkbox" /> Value</label>
</li>
<li class="header">
    <h3>Group 3</h3>
</li>
<li class="option">
    <label><input type="checkbox" /> Value</label>
</li>
<li class="option">
    <label><input type="checkbox" /> Value</label>
</li>
<li class="option">
    <label><input type="checkbox" /> Value</label>
</li>
</ul>

我的主要障碍是我无法包装组（如在 <div> 或 <li> 中），因为 headers 是动态插入的。 show/hide 包裹会很棒，但这不是一个选择。如果我不能包装它，我不知道如何定位组中的复选框。非常感谢您的想法。

Answer 1

使用过滤器函数获取已检查的元素并为其支持的头部元素触发点击：

$('li.header').click(function() {
    $(this).nextUntil('li:not(.option)').slideToggle();
    return false;
}).filter(function(){
   return $(this).nextUntil('li:not(.option)').find(':checked').length > 0;
}).click();

如果选中了组中的复选框，则显示该组复选框

Show group of checkboxes if a checkbox in the group is checked

checkbox

jquery

toggle

show-hide

Working Demo