Jquery检查嵌套DIV中的父复选框

Question

我想创建包含复选框的嵌套DIv。我现在正试图获得它，所以我可以检查一个低级复选框，它将检查所有父母只回到最高级别。

我想使用DIV，因为不要

以下是使用列表管理嵌套复选框的工作示例。

http://jsfiddle.net/j08691/3y3Pb/17/

我想使用DIV而不是列表来重现此示例，因为我不想一次显示DIV。我在主复选框前面使用“+”符号，如果用户点击此符号，它将弹出子选项。

这是我带有DIV的HTML：

<div>
        <label class="checkbox-inline">
            <input type='checkbox' class='psqGeral' name='psqNome1' value='ValueA' > TextoGeral1
        </label>

        <font style='font-size: 10px'>[<a style='text-decoration: none' href='#div_classe_especifica_1' onClick='toggleClassEspecifica(1)'><span id='span_classe_especifica_1'>+</span></a>]</font> 
        <div style='display:none' id='div_classe_especifica_1'>
            <label class="checkbox-inline">
                &nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome1'  value='Value1' > TextoEspecifico<br>
            </label>
            <label class="checkbox-inline">
                &nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome1'  value='Value2' > TextoEspecifico<br>
            </label>
            <label class="checkbox-inline">
                &nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome1'  value='Value3' > TextoEspecifico<br>
            </label>
        </div>
        <br>
        <label class="checkbox-inline">
            <input type='checkbox' class='psqGeral' name='psqNome2' value='ValueB' > TextoGeral2
        </label>
        <font style='font-size: 10px'>[<a style='text-decoration: none' href='#div_classe_especifica_2' onClick='toggleClassEspecifica(2)'><span id='span_classe_especifica_2'>+</span></a>]</font>
        <div style='display:none' id='div_classe_especifica_2'>
            <label class="checkbox-inline">
                &nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome2'  value='Value4' > TextoEspecifico<br>
            </label>
            <label class="checkbox-inline">
                &nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome2'  value='Value5' > TextoEspecifico<br>
            </label>
            <label class="checkbox-inline">
                &nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome2'  value='Value6' > TextoEspecifico<br>
            </label>
        </div>
        <br>
    </div>

<script>
    function toggleClassEspecifica(cod){
        //"div_classe_especifica_"+cod
        if ($( "#div_classe_especifica_"+cod ).css("display")=="none"){
            $( "#div_classe_especifica_"+cod ).show( );
            $( "#span_classe_especifica_"+cod ).text("-");
        } else {
        $( "#div_classe_especifica_"+cod ).hide( );
            $( "#span_classe_especifica_"+cod ).text("+");
        }
    }
    </script>

我的试用如下：

$('input[type=checkbox]').click(function () {
$(this).parent().find('input[type=checkbox]').prop('checked', $(this).is(':checked'));
var sibs = false;
$(this).closest('div').each(function () {
    if($('input[type=checkbox]', this).is(':checked')) sibs=true;
})
$(this).parents('div').prev().prop('checked', sibs);
});