关于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 相关文章推荐
JS 表单验证大全
Nov 23 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
Dec 22 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
js实现简单点赞操作
Mar 17 Javascript
vue跳转页面的几种方法(推荐)
Mar 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
PHP测试程序运行时间的类
2012/02/05 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
Python中模块与包有相同名字的处理方法
2017/05/05 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
django的登录注册系统的示例代码
2018/05/14 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
内衣营销方案
2014/03/15 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
解析Java中的static关键字
2021/06/14 Java/Android
Hive导入csv文件示例
2022/06/25 数据库