jQuery父子复选框没有正确隐藏答案

【问题标题】：jQuery parent-child check-boxes not hide properlyjQuery父子复选框没有正确隐藏
【发布时间】：2014-06-21 04:28:21
【问题描述】：

我创建了嵌套的父子复选框。当您选中父复选框时，子复选框会正确显示，但是当您取消选中任何父复选框时，它会隐藏所有复选框。

这是 JS Fiddle 中的 jQuery 代码：http://jsfiddle.net/6296B/

要跟踪问题，请按照以下步骤操作：

检查 100
然后在 120 上检查
然后在 123 上检查
然后取消选中 123

你会自动得到问题。

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
        $(document).ready(function()
          {
              $(".checkbox-container input[type='checkbox']").change(function()
              {
                  if ($(this).is(':checked')) 
                  { 
                       $(this).parents("li").children("ul").show(600);
                  }
                  else {  $(this).parents("li").children("ul").hide(600); }
              });
          });
    </script>
<style>
         .checkbox-container {}
         .checkbox-container label { display: block; }
         .checkbox-container ul {}
         .checkbox-container ul ul { list-style: none;  display: none;  }
         .checkbox-container ul { list-style: none;  display: block; }
         
        .checkbox-container input[type="checkbox"] {}
        
    </style>
<div class="checkbox-container">
        <ul>
            <li class="first">
                <input type="checkbox" name="100" value="100" >100
                <ul>
                    <li><input type="checkbox" name="110" value="110" >110</li>    
                    <li><input type="checkbox" name="120" value="120" >120
                        <ul>
                            <li><input type="checkbox" name="121" value="121" >121</li>
                            <li><input type="checkbox" name="122" value="122" >122</li>
                            <li><input type="checkbox" name="123" value="123" >123
                                <ul>
                                    <li><input type="checkbox" name="1230" value="1230" >1230</li>
                                    <li><input type="checkbox" name="1231" value="1231" >1231</li>
                                    <li><input type="checkbox" name="1232" value="1231" >1231</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

【问题讨论】：

取消选中复选框后，您希望发生什么？取消选中它的孩子和/或隐藏它的孩子但保持父母不变？
这里是示例，请检查：jsfiddle.net/manoj2010/6296B 按照步骤： 1. 检查 100 2. 然后检查 120 3. 然后检查 123 4. 然后取消检查 123 你会遇到问题自动
@ManojPrajapat 你能解释一下取消选中后你想做什么吗？
在 else 语句中，使用 parent 而不是 parents，但是考虑到子复选框可能仍然被选中（这是你想要的回发吗？）

标签： javascript jquery html

【解决方案1】：

尝试使用.parent() 而不是.parents()。

【讨论】：

我错误地交换了演示，所以它表明你的不工作。你得到了我的 +1

【解决方案2】：

应该是parent() 而不是parents()：

$(document).ready(function () {
     $(".checkbox-container input[type='checkbox']").change(function () {
         if ($(this).is(':checked')) {
             $(this).parent("li").children("ul").show(600);
         } else {
             $(this).parent("li").children("ul").hide(600);
         }
     });
});

【讨论】：

.parent() 仅向上遍历 DOM 树的单层。所以.parent("li")在这里无效。

【解决方案3】：

Working Demo

您可以使用.siblings() - Reference 来获取<ul>

$(document).ready(function () {
    $(document).ready(function () {
        $(".checkbox-container input[type='checkbox']").change(function () {
            if ($(this).is(':checked')) {
                $(this).siblings("ul").show(600);
            } else {
                $(this).siblings("ul").hide(600);
            }
        });
    });
});

其他选择：.next()

【讨论】：