HTML代码
<ul id="black" class="treeview-black"> <li><input type="checkbox" name="checkbox" value="7B17431B-BD7E-491B-BAF8-5B698C0FDA00" /><span>系统管理</span> <ul> <li><input type="checkbox" name="checkbox" value="5A961502-04F3-4D2B-A062-8430E975DAFE" /><a>角色设置</a></li> <li><input type="checkbox" name="checkbox" value="75137123-0BF1-45E0-802B-F24EE0A78795" /><a>系统设置</a></li> </ul> </li> <li><input type="checkbox" name="checkbox" value="D915AE1A-0438-4A02-B2D9-AA88ED2D9D14" /><span>用户管理</span> <ul><li><input type="checkbox" name="checkbox" value="07616C58-51A9-4371-A61C-334095F3C999" /><a>权限设置</a></li> <li><input type="checkbox" name="checkbox" value="452D8AA2-5F12-4963-917C-22E1CE7D618A" /><a>用户设置</a></li> <li><input type="checkbox" name="checkbox" value="8613878D-802F-4F28-ADB0-5FFAA703B25F" /><a>修改密码</a></li> </ul></li> </ul>
JS代码
$(function () { $(" input[type='checkbox'][name='checkbox']").click(function () { //子目录 var c = $(this).parent().find("input"); var b = $(this).attr('checked'); c.each(function () { $(this).attr('checked', b); }); var m = $(this).parent().parent('ul').find('input'); var count = 0; m.each(function () { if ($(this).attr('checked')) { count++; } }); //父目录 var p = $(this).parents('li'); //父目录 p.each(function () { var o = $(this).find('input'); if (count) { o[0].checked = true; } else { o[0].checked = !o[0].checked; } }); $(this).attr('checked', b); }); });
问题是选中是可以实现的,但取消选中却不行,不管是点击子节点还是主节点都是一样,不能取消掉选中状态。
不知道如何修改JS可以达到正选中和非选中想要的效果。
把
var b = $(this).attr('checked');
改为
var b = $(this).attr('checked')!=null?true:false;
记得结账
谢谢
@wavegui: 你这个动作还是蛮快的啊,呵呵,要是有项目可以继续给我做。