宝哥软件园

使用jQuery易用户界面实现复选框树的级联选中特效

编辑:宝哥软件园 来源:互联网 时间:2021-09-21

需求:子结点选中,父节点随之选中,父节点取消,子节点随之取消

代码:

!DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html;charset=utf-8 '/title/title link href=' js/themes/default/easy ui。CSS ' rel='样式表/link href=' js/themes/icon。CSS ' rel='样式表'/脚本src='http:js/jquery-1。8 .0 .量滴js /脚本脚本src=' http : js/jquery。易居。量滴js /脚本src=' http : js '系统,' children': [{ 'id': 11,' text': '用户管理,' children': [{ 'id': 19,' text': '增加},{“id”: 3,“text”:修改},{“id”: 5,“text”:删除}] },{ 'id': 12,' text': '角色管理,' children': [{ 'id': 13,' text': '增加},{“id”: 3,“text”:修改},{“id”: 5,“text”:删除}] }] },{ 'id': 2,' text': '其他,' state ' : ' closed ' }];$(函数(){ $('#tt ')).tree({ data: data,checkbox: true,cascadeCheck: false,onCheck: function (node,checked){ if(checked){ var parent node=$(' # TT ')).树(' getParent ',节点。目标);if (parentNode!=null) { $('#tt ').树(“检查”,ParentNode。目标);} } else { var childNode=$('#tt ').树(' getChildren ',节点。目标);if(ChildNode。长度0){ for(var I=0;I子节点。长度;我){ $('#tt ').树('取消选中,childNode[i]).目标);} } } } });});函数GetChecked(){ var arr=[];var checkeds=$('#tt ').树(“getChecked”、“checked”);for(var I=0;长度;i ) { arr.push(checkeds[i]).id);} alert(arr.join(',');}/脚本/流浆池ul id='tt'/ul输入类型='按钮'值='获取选中onclick=' GetChecked()'//body/html如图:

更多资讯
游戏推荐
更多+