关于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 Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
删除重复数据的算法
2006/11/23 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
用Python进行基础的函数式编程的教程
2015/03/31 Python
详解在Python中处理异常的教程
2015/05/24 Python
利用Python破解验证码实例详解
2016/12/08 Python
详解python中requirements.txt的一切
2017/03/03 Python
Python中str.format()详解
2017/03/12 Python
JSON Web Tokens的实现原理
2017/04/02 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
Python自带的IDE在哪里
2020/07/01 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
中学生国庆节演讲稿2015
2015/07/30 职场文书
高三生物教学反思
2016/02/22 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js