<table> <ul> <li> <lable><input name="all" value="all" type="checkbox"/>all</lable> <ul id="childs"> <li><lable><input name="a" value="1" type="checkbox"/>1</lable> <ul> <li><lable><input name="a" value="1-1" type="checkbox"/>1-1</lable></li> <li><lable><input name="a" value="1-2" type="checkbox"/>1-2</lable></li> <li><lable><input name="a" value="1-3" type="checkbox"/>1-3</lable></li> </ul> </li> <li><lable><input name="a" value="2" type="checkbox"/>2</lable> <ul> <li><lable><input name="a" value="2-1" type="checkbox"/>2-1</lable></li> <li><lable><input name="a" value="2-2" type="checkbox"/>2-2</lable></li> <li><lable><input name="a" value="2-3" type="checkbox"/>2-3</lable></li> </ul> </li> </ul> </li> </ul> </table> <script> var childs = $("#childs"), all = $("input[type=checkbox][name='all']"), childCount = childs.find("input[type=checkbox]").length; $("input[type=checkbox]").change(function(){ var _this = $(this); if(this.value.indexOf("-") === -1){ _this.closest("li").find("ul input[type=checkbox]").prop("checked",_this.is(":checked")); } else { var _ul = _this.closest("ul"); _ul.closest("li") .find("input[type=checkbox]:first") .prop("checked",_ul.find("input[type=checkbox]:checked").length === _ul.find("input[type=checkbox]").length); }