关于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图像处理—平滑处理实现原理
Dec 28 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 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
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
php实现短信发送代码
2015/07/05 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
python使用cookie库操保存cookie详解
2014/03/03 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
python实现桌面壁纸切换功能
2019/01/21 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
基于python使用tibco ems代码实例
2019/12/20 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
优秀员工个人的自我评价
2013/11/29 职场文书
六一儿童节活动策划方案
2014/01/27 职场文书
保证书范文大全
2014/04/28 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
安全先进个人材料
2014/12/29 职场文书
给医院的感谢信
2015/01/21 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
催款函怎么写
2015/06/24 职场文书
五年级数学教学反思
2016/02/16 职场文书