如上图所示，在现实生活中存在许多这种下级项受上级祖父元素控制。如公司管理系统，电脑文件夹所在目录等，都是这种情况。下面是我使用checkbox简易实现该效果的代码。
HTML
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"/> <meta content="text/html" charset="utf-8" /> <title>权限管理</title> </head> <body> <ul> <li> <input name="0" type="checkbox"> </li> <li> <input name="0" type="checkbox"> <ul> <li><input name="1" type="checkbox"></li> <li><input name="2" type="checkbox"></li> <li> <input name="3" type="checkbox"> <ul> <li><input name="4" type="checkbox"></li> <li><input name="5" type="checkbox"></li> <li> <input name="6" type="checkbox"> <ul> <li><input name="4" type="checkbox"></li> <li><input name="5" type="checkbox"></li> <li><input name="6" type="checkbox"></li> </ul> </li> </ul> </li> </ul> </li> </ul> </body> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="power.js"></script> </html>
JS
$(function(){ /* * prop和attr的区别 * prop:设置或返回被选元素的的属性和值，如DOM属性(selectedIndex,tagName,nodeName,nodeType,ownerDocument,defaultChecked和defaultSelected) * 返回属性之，返回第一个匹配的元素值 * 设置属性值时，匹配元素集合设置一个或多个属性/值对 * attr设置HTML属性值 */ $("input").click(function(e){ var parents=$(this).parent("li").parents("li"); if($(this).is(":checked")){ $(this).parent("li").find("input").prop("checked",true); $(parents).children("input").prop("checked",true); }else{ $(this).parent("li").find("input").prop("checked",false); $(parents).each(function(index,ele){ var len=$(ele).children("ul").find("input:checked").length; if(len!=0){ $(ele).children("input").prop("checked",true); }else{ $(ele).children("input").prop("checked",false); } }) } }) })