关于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 相关文章推荐
ext 代码生成器
Aug 07 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
js实现打字小游戏
Dec 17 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 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脚本的10个技巧(7)
2006/10/09 PHP
基于mysql的论坛(6)
2006/10/09 PHP
php录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
php仿ZOL分页类代码
2008/10/02 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
python解析文件示例
2014/01/23 Python
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
Python循环结构的应用场景详解
2019/07/11 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
python中pyplot基础图标函数整理
2020/11/10 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
二手书店创业计划书
2014/01/16 职场文书
认购协议书范本
2014/04/22 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
小学教研工作总结2015
2015/05/13 职场文书
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS