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

Question

请查看fiddle here。

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

这是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>），因为标题是动态插入的。显示/隐藏包装会很棒，但这不是一个选择。如果我无法包装它，我无法弄清楚如何定位组中的复选框。非常感谢您的想法。

Answer 1

使用过滤器功能获取已检查的元素，并触发其支持的head元素的触发器：

$('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();

<强>

<强> Working Demo