博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
模拟多级复选框效果的jquery代码
阅读量:5948 次
发布时间:2019-06-19

本文共 718 字,大约阅读时间需要 2 分钟。

jquery做了个多级复选框的效果,代码总共就20+行就over了。

我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升。

主要分享下jquery的这个效果的实现。代码块分两块:

一是全选的效果,就是点击全选的复选框时它的子孙都相应被选中或者未选中。这人很好做,代码如下:

evtEle.parent().next(".checks").find("input:checkbox").attr("checked", evtEle[0].checked);//evtEle是点击的复选框

二是当前复选框的父框根据当前框的兄弟是否全选中来决定父框是否选中,再继续往上看父框的父框等。

当全选中时这里的实现使用parents来得到所有的父框,对每一个的操作结合each来完成。

当非全选中时父框依次失去被选中。代码如下:

if (evtEle.is("input:checked")) {evtEle.parents(".checks").each(function () {!$(this).children("p").children("input:checkbox").filter(function () {return !this.checked;})[0] && $(this).prev().children("input:checkbox").attr("checked", "checked");});} else {evtEle.parents(".checks").prev().children("input:checkbox").attr("checked", false);}

转载地址:http://zmfxx.baihongyu.com/

你可能感兴趣的文章
使用Intellij创建springboot项目Spring Initializr Error 403
查看>>
0617 - 只做核心业务
查看>>
使用MVVM尝试开发Github客户端及对编程的一些思考
查看>>
算法-基础(一)数组基本操作 和 静态方法(后面编写算法的时候会用到)
查看>>
浏览器安全之同源策略
查看>>
把vue-cli build的结果放到服务器上
查看>>
JSON入门看这一篇就够了
查看>>
vue + vuex + koa2开发环境搭建及示例开发
查看>>
(二)神经网络入门之Logistic回归(分类问题)
查看>>
秒杀流量控制的执行方案
查看>>
[译][摘录]HEVC编码中的多视域和3D扩展,第四部分:3D-HEVC编码技术
查看>>
BEM命名 css模块化解决方案
查看>>
使用Tower克隆gitLab项目
查看>>
前端js压缩图片并上传
查看>>
我的Java设计模式-工厂方法模式
查看>>
线程存储简介
查看>>
WEEX系列 我的第一个WEEX DEMO
查看>>
Deploy NodeJS Docker to QiO Edge Cloud using Kubernetes
查看>>
【Hadoop学习】HDFS基本原理
查看>>
关于解决IE8以下版本获取DOM节点的方法
查看>>