关于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_ibm
May 16 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 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 SQLite类
2009/05/07 PHP
PHP 变量的定义方法
2010/01/26 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
php跨域调用json的例子
2013/11/13 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
SVM基本概念及Python实现代码
2017/12/27 Python
python实现微信自动回复功能
2018/04/11 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
keras K.function获取某层的输出操作
2020/06/29 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
小学教师见习总结
2015/06/23 职场文书
祝寿主持词
2015/07/02 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
儿童诗两首教学反思
2016/02/23 职场文书