Question

我有Parent1和复选框，当我点击Parent1复选框时，所有子项属于parent1应该检查，parent1和复选框应该淡出，如果我取消选中任何一个child，parent1和复选框应该再次重新出现，父和子值来自数据库，它们在每个循环中，即每个循环中该子项内每个循环的第一个父级。

我的代码位于http://jsfiddle.net/mrc4N/3/

<div class="middle-right">
<ul class="mid-right-list">
<li><span id="Parent1a">+ Parent1<input name="parent" class="pc-box" type="checkbox"></span>
        <ul class="pa rplist">
<li value="1" class="parent1">- Child   1.1 <input class="cc-box" name="child" type="checkbox"></li>
<li value="2" class="parent1">- Child   1.2 <input class="cc-box" name="child" type="checkbox"></li>
<li value="3" class="parent1">- Child   1.3 <input class="cc-box" name="child" type="checkbox"></li>
            </ul>
              </li> 
<li><span id="Parent2a">+ Parent2<input name="parent" class="pc-box" type="checkbox"></span>
    <ul class="pb rplist">
<li value="1" class="parent2 c1">- Child 2.1 <input class="cc-box" name="child" type="checkbox"></li>
<li value="2" class="parent2 c2">-Child 2.2 <input class="cc-box" name="child" type="checkbox"></li>
<li value="3" class="parent2 c3">- Child    2.3 <input class="cc-box" name="child" type="checkbox"></li>
    </ul>
</li>
<li><span id="Parent3a">+ Parent3<input name="parent" class="pc-box" type="checkbox"></span>
<ul class="pc rplist">
<li value="1" class="parent3 c1">-Child 3.1 <input class="cc-box" name="child" type="checkbox"></li>
<li value="2" class="parent3 c2">- Child    3.2 <input class="cc-box" name="child" type="checkbox"></li>
    <li value="3" class="parent3 c3">- Child    3.3 <input class="cc-box" name="child" type="checkbox"></li>
    </ul>               
</li>
</ul>
</div>

提前致谢

Answer 1

您可以使用以下内容：

$('[type="checkbox"][name="parent"]').click(function(){
    $(this).parent().next('ul').find('li input').prop('checked',this.checked);
});

EXAMPLE HERE

Answer 2

这里的基本逻辑是找到父复选框（在这种情况下，它们具有类pc-box）钩子的变换处理程序。

然后，您可以在与更改的父复选框相同的li中找到其他子复选框元素，并将其checked属性设置为与父状态相同

//dom ready handler
jQuery(function () {
    //change handler for parent checkboxes
    $('.pc-box').change(function () {
        //update the checked status of all child checkeboxes in the same li
        $(this).closest('li').find('ul input').prop('checked', this.checked)
    })
})

演示：Fiddle

Dom Ready Handler
class-selector - 使用类
change()
closest() - 查找更改后的li所属的li
find() - 在同一li
.prop() - 更改已检查的属性

Answer 3

“当我点击Parent1复选框时，所有孩子都属于parent1应该检查，而parent1和复选框应该淡出，如果我取消选中任何一个孩子，则parent1和复选框应重新出现”

以下是一种方法：

$(document).ready(function() {        
    $(".pc-box").click(function() {
        if (this.checked) {
            $(this).closest("li").find(".cc-box").prop("checked", true);
            $(this).parent().fadeOut();
        }  
    });
    $(".cc-box").click(function() {
        if (!this.checked)
            $(this).closest("ul").prev().fadeIn().find(".pc-box").prop("checked", false);
    });
});

演示：http://jsfiddle.net/mrc4N/4/

“并且父值和子值来自数据库，并且它们适用于每个循环”

我不明白这些信息是如何与您提出的要求相关的，所以我会继续忽略它。

我使用的所有jQuery方法的文档都可以在the jQuery website获得。

为您完成的作业：查找我的代码中使用的每个jQuery方法。并做一些jQuery tutorials。

Answer 4

尝试此工作正常：

$('[type="checkbox"][name="parent"]').on("click", function() {
  var all = $(this);
  $('input:checkbox').each(function() {
       $(this).prop("checked", all.prop("checked"));
  });
});

单击父复选框时选中所有选中的复选框

4 个答案: