如何在嵌套複選框結構中選中父複選框時檢查所有複選框？

大家好我有一個複雜的複選框結構，看起來像這樣如何在嵌套複選框結構中選中父複選框時檢查所有複選框？

<div class="accordian-group"> 
    <div> 
    <input type="checkbox" class="parentcheckbox" value""/> 
     <ul> 
     <li> <input type="checkbox" value""/></li> 
     <li> <input type="checkbox" value""/></li> 
     <li> <input type="checkbox" value""/> 
      <ul> 
       <li> <input type="checkbox" value""/></li> 
       <li> <input type="checkbox" value""/></li> 
       <li> <input type="checkbox" value""/> 
        <ul> 
         <li> <input type="checkbox" value""/></li> 
        </u> 
       </li> 
      </ul> 
     </li> 
    </div> 
    <div> 
    <input type="checkbox" class="parentcheckbox" value""/> 
     <ul> 
     <li> <input type="checkbox" value""/></li> 
     <li> <input type="checkbox" value""/></li> 
     <li> <input type="checkbox" value""/> 
      <ul> 
       <li> <input type="checkbox" value""/></li> 
       <li> <input type="checkbox" value""/></li> 
       <li> <input type="checkbox" value""/> 
        <ul> 
         <li> <input type="checkbox" value""/></li> 
        </u> 
       </li> 
      </ul> 
     </li> 
    </div> 
</div>

我想要做的是當父複選框被選中在側的所有複選框該div應當檢查，如果我檢查一個由一個父所有子框中的複選框，父母框應該檢查

和我有一個添加按鈕在我的頁面上單擊添加按鈕如果父類別被選中，並且該div的所有兒童都被檢查我應該得到所有的價值我怎麼能做到這一點可以幫助我解決這個問題或可以指導我通過這個

來源

2013-03-09 user2152019

試試這個：Live Demo

// Whenever the parent checkbox is checked/unchecked 
$(".parentcheckbox").change(function() { 
    // save state of parent 
    c = $(this).is(':checked'); 
    $(this).parent().find("input[type=checkbox]").each(function() { 
     // set state of siblings 
     $(this).attr('checked', c); 
    }); 
}); 

// Update parent checkbox based on children 
$("input[type=checkbox]:not('.parentcheckbox')").change(function() { 
    if ($(this).closest("div").find("input[type=checkbox]:not('.parentcheckbox')").not(':checked').length < 1) { 
     $(this).closest("div").find(".parentcheckbox").attr('checked', true); 
    } else { 
     $(this).closest("div").find(".parentcheckbox").attr('checked', false); 
    } 
});

來源

2013-03-09 19:28:35 ATOzTOA

'.siblings'不走遞歸樹倒不是嗎？它只會檢查......以及我的兄弟姐妹。我不相信的是作者的用例。 – Nucleon 2013-03-09 19:30:46

@Nucleon是的，用'find'更新了答案。 – ATOzTOA 2013-03-09 19:41:56

已更新答案... – ATOzTOA 2013-03-09 19:51:17

你可以這樣做：

$('input[type="checkbox"]').change(function(){ 
    if (!$(this).is(':checked')) return; // do nothing if not checking 
    var li = $(this).closest('li'); 

    // check all children 
    $('li input[type="checkbox"]', li).prop('checked', true); 

    // see if all siblings are checked 
    var all = true; 
    li.siblings().find('>input[type="checkbox"]').each(function(){ 
    if (!$(this).is(':checked')) all = false; 
    }); 
    if (all) { 
    // check parent checkbox 
    $(this).closest('ul').closest(':has(>input)') 
      .find('input[type="checkbox"]').prop('checked', true); 
    } 
});

Demonstration

來源

2013-03-09 19:33:04

如何在嵌套複選框結構中選中父複選框時檢查所有複選框？

回答

相關問題