关于input全选反选恶心的异常情况


Posted in Javascript onJuly 24, 2016

上一篇讲到:第一次点击全选按钮input显示对勾,第二次则不显示,需要用prop来添加checked属性。

但是用prop会出现一个问题,对勾显示,而checked属性不会被添加(比如:$("input[type='checkbox'][name='che']").attr("checked") 获取结果为undefined),这样就无法通过if语句判断是否选中,从而实现反选功能。

我们先来理一下思路:既然“反选”功能的实现是通过判断是否有checked属性,所以当每次执行“全选”“反选”功能时,把checked属性都清除掉,这样之前重复添加的checked属性每次都会进行清除。示例代码如下:

 //全选
$("#quanxuan").click(function(){
$("#tb").find("input[type='checkbox'][name='che']").removeAttr("checked");
$("#tb").find("input[type='checkbox'][name='che']").prop("checked", true);
});
//反选
$("#fanxuan").click(function(){
$("#tb").find("input[type='checkbox'][name='che']").each(function(){
if($(this).is(":checked")){
$(this).removeAttr("checked");
$(this).prop("checked",false);
}else{
$(this).removeAttr("checked");
$(this).prop("checked","checked");
}
});
});

目前只能想到这种冗余的办法了,日后遇到新的解决方法再补充。

以上所述是小编给大家介绍的关于input全选反选恶心的异常情况,非常不错,具有参考借鉴价值,希望对大家有所帮助!

Javascript 相关文章推荐
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
微信小程序实现多选功能
Nov 04 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
JS中的==运算: [''] == false —>true
Jul 24 #Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 #Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 #Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 #Javascript
省市二级联动小案例讲解
Jul 24 #Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 #Javascript
js简单实现调整网页字体大小的方法
Jul 23 #Javascript
You might like
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
jQuery提示效果代码分享
2014/11/20 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
python如何代码集体右移
2020/07/20 Python
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
自我鉴定范文200字
2013/10/02 职场文书
师范生个人推荐信
2013/11/29 职场文书
女娲补天教学反思
2014/02/05 职场文书
小学生演讲稿大全
2014/04/25 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
投标单位介绍信
2015/05/05 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang