关于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 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
移动端界面的适配
Jan 11 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
vue实现路由切换改变title功能
May 28 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 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获取新浪微博数据API实例
2013/11/12 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
python 读取串口数据的示例
2020/11/09 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
人事行政经理岗位职责
2014/06/18 职场文书
铅球加油稿100字
2014/09/26 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
2015年质检工作总结
2015/05/04 职场文书
2016国培研修心得体会
2016/01/08 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
把77A收信机改造成收音机
2022/04/05 无线电
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android