关于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基本语法分析说明
Jun 15 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 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实现Ftp用户的在线管理的代码
2007/03/06 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
JavaScript使用cookie
2007/02/02 Javascript
一个符号插入器 中用到的js代码
2007/09/04 Javascript
地震发生中逃生十大法则
2008/05/12 Javascript
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python制作一个桌面便签软件
2015/08/09 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
python中的for循环
2018/09/28 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
国际贸易专业推荐信
2013/11/15 职场文书
拾金不昧表扬信
2015/01/16 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
教师工作证明范本
2015/06/12 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫