javascript代码实例教程-jquery中list列表的全选实现

发布时间:2019-01-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jquery中list列表的全选实现脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

这篇博客的主题是list列表的全选实现,以前的框架封装的比较多,很多应用都没亲自实现或仔细理解过。现在入职的这家公司虽然代码很少封装,但也给了我亲自实现的机会

相信很多朋友在实际开发过程中或者是改bug的时候,都曾经为不能全选或取消全选的bug苦恼过。以前我在遇到这类问题的时候也心有恐惧,避而远之(可能是被购物车的全选问题吓到了吧...)。但是在今天实际去做的时候,忽觉豁然开朗。任何妖魔鬼怪都纸老虎~好了,现在开始说一下我的具体思路:

第一:在总体上实现全选与取消全选,具体的jquery的代码如下(这里遇到了js冲突的问题,大家在遇到这类问题的时候,可以尝试去改变jquery的简写符号$):

jquery中list列表的全选实现

实现此功能主要是对全选框的状态判断,然后逐个遍历,施加状态:

jquery中list列表的全选实现

当然,对于具体实现的代码有多种,我这里是沿用我平时的试用习惯。其他的方式可自行百度,不详细贴出。

第二:针对列表数据前的勾选操作,具体情形我也是分为两步:

1.已经全选 2.没有全选

这里我会命名一个变量flag,主要目的是方便对结果进行识别。

jquery中list列表的全选实现

需要注意的是,最后的flag判断不可放在循环里,否则会引发一个比较有趣的bug,有兴趣的话可自行尝试一下~

ok,这篇博客就到这里,篇幅较短。本想把之前自己总结的分页功能也在这里分享一下,但是...或许是太久不写在这方面没这么积极了,也或许是我忘了怎么去实现的...

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jquery中list列表的全选实现全部内容,希望文章能够帮你解决javascript代码实例教程-jquery中list列表的全选实现所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。