关于input全选反选恶心的异常情况
上一篇讲到:第一次点击全选按钮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全选反选恶心的异常情况的更多相关文章
- input checkbod 全选 反选
<script> var CheckBox=div.getElementsByTagName('input'); ...
- JavaScript、全选反选-课堂笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python: jquery实现全选 反选 取消
引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
- BootStrapt iCheck表单美化插件使用方法详解(含参数、事件等) 全选 反选
特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...
- 用javascript实现全选/反选组件
以下是本人制作的全选/反选 组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
- jquery、js全选反选checkbox
操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...
- Dom操作--全选反选
我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路:首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那我 ...
随机推荐
- .NET Core HtmlAgilityPack HTML解析利器
最近学习.NET Core ,想把自己之前的一个项目升级到 .NET Core. 发现HtmlAgilityPack 没法进行引用,遂自己做了些修改,可以运行在 .NET Core 中.现在分享出来, ...
- android布局属性详解
RelativeLayout用到的一些重要的属性: 第一类:属性值为true或false android:layout_centerHrizontal 水平居中 android:layout_cen ...
- IIS8发布WCF接口中遇到的问题总结
环境:系统Win8.1+VS2013+IIS8 在VS13中新建一个WCF服务应用程序,新建之后系统会默认给我们新建一个方法.
- PDF解析帮助类
public class ComPDFHepler { /// <summary> /// 正则获取字符串中两个字符串间的内容 /// </summary> /// <p ...
- Oracle修改默认字符编码
--查看Oracle数据库字符集: Sql代码 select userenv('language') from dual; 查询结果: SIMPLIFIED CHINESE_CHINA.AL32UTF ...
- 2016读书List
2016年读书书单. 1. <华尔街漫步> + <战胜华尔街>+ <华尔街之狼> 2. <野蛮大陆> 3. <第三帝国的最后十四天> 4. ...
- Guava学习笔记:Preconditions优雅的检验参数
在日常开发中,我们经常会对方法的输入参数做一些数据格式上的验证,以便保证方法能够按照正常流程执行下去.对于可预知的一些数据上的错误,我们一定要做事前检测和判断,来避免程序流程出错,而不是完全通过错误处 ...
- bootstrap源码分析之tab(选项卡)
实现tab选项卡的应用,此插件相对比较简单 源码文件: tab.js 实现原理 1.单击一个元素时,首先将原来高亮的元素取消2.然后给被单击元素进行高亮3.如果单击元素是下拉框中某个选项,则选中本身, ...
- Winjs – 微软开源技术发布的 JavaScript 组件集
Winjs 是由微软开源技术的开发者推出的一组 JavaScript 组件,包括 ListView.ListView.Tooltip.DatePicker.Ratings 等等,帮助 Web 开发人员 ...
- 尝试加载 Oracle 客户端库时引发 BadImageFormatException。问题记录
电脑是win8 64位,安装oracle 11g r2 64位的,谁知道一切装完毕后,打开项目却连不上oracle数据了...首先是pl/sql连不上,装了oracle服务器,应该是不用再装客户端,p ...