关于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 相关文章推荐
jQuery DOM操作小结与实例
Jan 07 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 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实现html标签闭合检测与修复方法
2015/07/09 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
javascript中的new使用
2010/03/20 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
vue3.0生命周期的示例代码
2020/09/24 Javascript
python numpy中cumsum的用法详解
2019/10/17 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
学习Python需要哪些工具
2020/09/04 Python
python raise的基本使用
2020/09/10 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
室内设计自我鉴定
2013/10/15 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
房产公证委托书范本
2014/09/20 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL