关于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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
jquery ajax 登录验证实现代码
Sep 23 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
javascript元素动态创建实现方法
May 13 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 Javascript
IDEA安装vue插件图文详解
Sep 26 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中Date获取时间不正确怎么办
2008/06/05 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
js实现星星打分效果
2020/07/05 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
Ejb技术面试题
2015/04/29 面试题
见习期自我鉴定
2014/01/31 职场文书
小学少先队活动方案
2014/02/18 职场文书
责任担保书范文
2014/05/21 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
社区务虚会发言材料
2014/10/20 职场文书
端午节活动总结报告
2015/02/11 职场文书
班主任自我评价范文
2015/03/11 职场文书
自荐信大全
2019/03/21 职场文书
javaScript Array api梳理
2021/03/31 Javascript