关于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.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
基于js disabled="false"不起作用的解决办法
Jun 26 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 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
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
python类和继承用法实例
2015/07/07 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
房地产销售计划书
2014/01/10 职场文书
教师专业自荐书范文
2014/02/10 职场文书
高校教师岗位职责
2014/03/18 职场文书
安全生产目标责任书
2014/04/14 职场文书
酒店节能降耗方案
2014/05/08 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
综治工作汇报材料
2014/10/27 职场文书
花田少年史观后感
2015/06/16 职场文书
教师节座谈会主持词
2015/07/03 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis