jQuery父子復選框無法正確隱藏

Question

提前感謝您的幫助。
我創建了嵌套的父子復選框。
當您選中父復選框時，子項顯示正常，
但是當您取消選中任何父復選框時，它會隱藏所有復選框。

這是jQuery代碼。 JS小提琴示例http://jsfiddle.net/6296B/

跟蹤問題請按照步驟：
1.檢查100
2.然后檢查120
3.然后檢查123
4.然后取消檢查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>

Answer 1

嘗試使用.parent()而不是.parents() 。

Answer 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);
         }
     });
});

Answer 3

工作演示

你可以使用.siblings() - 引用來獲取<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()