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

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

使用过滤功能获取已检查的元素并触发点击其支持的头部元素：

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