javascript - jQuery parent-child check-boxes not hide properly -

javascript - jQuery parent-child check-boxes not hide properly -

help in advance. have created nested parent-child check-boxes. when checked on parent checkbox kid showing , when un-checked parent checkbox hide check-boxes. here jquery code. js fiddle illustration http://jsfiddle.net/6296b/

track issue please follow step : 1. checked on 100 2. checked on 120 3. checked on 123 4. un-check 123

you got issue automaticly

<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>

try utilize .parent() instead of .parents().

javascript jquery html