关于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 相关文章推荐
JavaScript 布尔操作符解析  && || !
Aug 10 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
Angular2自定义分页组件
Apr 19 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 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
PHP控制网页过期时间的代码
2008/09/28 PHP
Views rows style模板重写代码
2011/05/16 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
编程语言Python的发展史
2014/09/26 Python
python中二维阵列的变换实例
2014/10/09 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
骨干教师培训方案
2014/05/06 职场文书
学用政策心得体会
2014/09/10 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
观后感格式
2015/06/19 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL