本文通过一个实例说明了一个简单的JQuery复选框树结构图。分享给大家参考，如下：

这是我自己写的一个简单的树形结构图，功能如下：

1.最左边的按钮隐藏并显示子目录

2.单击父节点的复选框后，父节点下的所有子节点也被选中；如果未选择父节点，下面的所有子节点也将被取消选择(全选或取消全选)

3.当选择了子节点时，也选择了对应的父节点；当未选择所有子节点时，也会取消选择父节点

这是要实现的最简单的功能。下面我们来说说具体的实现：

1.介绍图书馆

这些操作都是通过JQuery实现的，所以首先要介绍JQuery库，可以从官网下载，也可以通过CDN引用。在这里，我指的是CDN:

！-引入jquery-script src=' http :3359 cdn . bootcss.com/jquery/3 . 0 . 0-alpha 1/jquery . min . js '/script 2 .要隐藏和显示的子目录

我只是在这里做了一个简单的，可能看起来不是很漂亮。我最左边的按钮是一个按钮，没有经过CSS美化，所以看起来很丑。但是，这不是重点，重点是我们功能的实现。因为我的代码比较简单，注释也写得比较详细，这里就不多介绍了，只粘贴代码：

！-切换子目录中隐藏或显示的按钮-div class=' div _ inline '输入类型=' button '值='-' class=' tree _ node _ Toggle _ button '/div按钮位于上方，单击事件位于下方：

//添加点击事件$('。tree _ node _ toggle _ button’)。单击(function(){//获取节点var $ toggle _ node=$ (this)。父项()。下一个()。查找('。tree _ node _ child ' $ toggle _ node . toggle()；//切换隐藏或显示//切换按钮的显示，如果($ Toggle _ node . is(' : visible '){ $(this)。val('-')；}else{ $(this)。val(“”)；}});简单说明一下逻辑，点击按钮后，切换子目录的隐藏或显示，然后根据子目录的隐藏或显示状态，重置按钮“”或“-”的显示

3.全选/不选

//添加点击事件$()。所有父节点的tree _ node _ parent _ checkbox)。点击(函数(){//获取父节点是否选择var是change=$ (this)。道具('选中')；如果(isChange){ //如果选中，则父节点下的所有子节点都被选中//获取当前复选框节点的同级节点下的所有复选框子节点，并选择$ (this)。下一个()。查找('。tree _ node _ child _ checkbox’)。prop ('checked '，true)；}else{ //取消选中，取消选择当前复选框节点的同级节点下的all//get all复选框子节点，并选择$ (this)。下一个()。查找('。tree _ node _ child _ checkbox’)。removeattr('选中')；}});这里，请特别注意应该使用prop()来切换复选框，而不是attr()。如果使用attr()，我们需要的效果不会第一次出现。关于prop和attr的区别，可以去官网查看prop和JQuery prop的介绍。

4.选择子节点后父节点的相应变化状态

//添加点击事件$()。tree _ node _ child _ checkbox)。点击(函数(){//获取所选节点的父节点下所有子节点的选定个数var length=$ (this)。父项()。查找('。选中了tree _ node _ child _ checkbox ://确定是否($ (this)。当前节点选择了prop(' checked '){//Yes//如果所有选择的节点都是1，则选择父节点if(length==1){ //选择父节点$ (this)。父项()。prev()。如果(长度==0){ //取消选中父节点$ (this)，则prop } }else{ //node未选中。父项()。prev()。removeattr('选中')；} }});主要代码这么多，其实也没什么复杂的。

单击此处下载完整的示例代码。

更多对jQuery感兴趣的读者可以查看本网站主题：《jQuery操作DOM节点方法总结》、《jQuery页面元素操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》、0103010

希望本文对大家的jQuery程序设计有所帮助。