<ul id="tree"> <s:iterator value="#application.topPrivilegeList"> <li> <input type="checkbox" name="privilegeIds" value="${id}" id="ck_${id}" onclick="doChecked(this)" <s:property value="%{id in privilegeIds?'checked':''}"/> /> <label for="ck_${id}"><span class="folder">${name}</span></label> <ul> <s:iterator value="children"> <li> <input type="checkbox" name="privilegeIds" value="${id}" id="ck_${id}" onclick="doChecked(this)" <s:property value="%{id in privilegeIds?'checked':''}"/> /> <label for="ck_${id}"><span class="folder">${name}</span></label> <ul> <s:iterator value="children"> <li> <input type="checkbox" name="privilegeIds" value="${id}" id="ck_${id}" onclick="doChecked(this)" <s:property value="%{id in privilegeIds?
'checked':''}"/> /> <label for="ck_${id}"><span class="folder">${name}</span></label> </li> </s:iterator> </ul> </li> </s:iterator> </ul> </li> </s:iterator> </ul>
取消/选中上下级 尾随变化的js
<script type="text/javascript"> $("#tree").treeview(); </script> <script type="text/javascript"> function doChecked(inp){ // 当选中或取消一个权限时,也同一时候选中或取消全部的下级权限 var boo=$(inp).attr("checked"); /* alert(boo); */ $(inp).siblings("ul").find("input").attr("checked", boo); // 当选中一个权限时,也要选中全部的直接上级权限 if(inp.checked == true){ $(inp).parents("li").children("input").attr("checked", true); }else{ // 假设当前是取消选中,而且同级中没有被选中的项,则也取消上级的选中状态 var jCheckedSibingCB = $(inp).parent("li").siblings("li").children("input[type=checkbox]:checked"); if(jCheckedSibingCB.size() == 0){ var jCheckboxInput = $(inp).parent().parent("ul").prev("label").prev("input[type=checkbox]"); jCheckboxInput.attr("checked", 0); // 递归操作每一层直属上级 var jParentLi = jCheckboxInput.parent("li"); if(jParentLi.size() > 0){ doChecked(jCheckboxInput); } }} }