前言
Web项目中熟练的应用各种JS的技巧，将会帮助我们更加高效的实现页面逻辑的设计。下面来和大家说说我在项目中应用到的复选框的实际代码。
内容
首先说明一下我们将要实现的效果，
可以从导航名称看出，这是一个分级的菜单列表(用户权限配置页面)
一级标题：控制面板
二级标题：系统管理 界面管理 系统用户
三级标题：数据字典 后台导航管理 管理员管理 角色 管理
当我们选中上一级目录的显示选框时，其下的所有子级选框进行联动选中。
这样的一个需求在平时的项目中也是很常见的，下面让我们从HTML来看看这个页面，列表通过ul标签分隔每行，
Class名称layer-1,layer-2,layer-3表示各级标签
那么接下来就是完成JS的功能实现了，首先是设置页面的触发事件，
触发的条件是，当任意一个复选框被选中时触发，由于页面上的复选框较多，所以专门为标有”显示”名称的复选框设置value值为’Show’；
最终的JS实现代码如下：
//复选框级联选中
$("input[value='Show']").click(function () {
var $this = $(this);
$this.parents("[class^='layer']:eq(0)").find(".cbllist").find("input[value='Show']").prop("checked", $this.prop("checked"));
});
小结
在了解并准备实现这个功能的过程中，曾一度以为是一个很麻烦的实现过程。令人兴喜的是最终优化后的代码仅仅三行就达到了我想要实现的联动效果。这样的小小功能也让我发觉有时候站在巨人的肩膀上多查多问可以让平时觉得很麻烦的功能瞬间分解，变得简单起来。还在点滴积累的路上，荣幸与您分享~
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由半码博客整理，本文链接：https://www.bmabk.com/index.php/post/144264.html
