上一篇讲到:第一次点击全选按钮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全选反选恶心的异常情况的更多相关文章

  1. input checkbod 全选 反选

      <script>             var CheckBox=div.getElementsByTagName('input');                         ...

  2. JavaScript、全选反选-课堂笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jQuery全选/反选checkbox

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  5. BootStrapt iCheck表单美化插件使用方法详解(含参数、事件等) 全选 反选

    特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...

  6. 用javascript实现全选/反选组件

    以下是本人制作的全选/反选 组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...

  7. jquery、js操作checkbox全选反选

    全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

  8. jquery、js全选反选checkbox

    操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...

  9. Dom操作--全选反选

    我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路:首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那我 ...

随机推荐

  1. js 模块化历程

    作者:吕大豹 网址:http://www.cnblogs.com/lvdabao/p/js-modules-develop.html 这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生 ...

  2. ASP.Net中防止页面刷新重复提交的几种方法

    [摘要] 目前很多网站都要提交页面插入或更新数据库,比如留言本,一个用户提交留言后,如果按F5,就会重新提交一遍留言,导致数据库出现两条一模一样的留言,本文介绍了几种防止页面刷新,导致重复提交数据的方 ...

  3. Jquery获取checkbox属性checked为undefined

    说明:本文来自新浪博客,因为无法收藏,故直接copy过来备注,以后好查询 原网址:http://blog.sina.com.cn/s/blog_6810dfc20101jddq.html 使用jQue ...

  4. Lua使用心得(2)

    在lua脚本调用中,如果我们碰到一种不好的脚本,例如: while 1 do do end 那我们的程序主线程也会被阻塞住.那我们如何防止这种问题呢?下面就给出一个解决的办法. 首先为了不阻塞主线程, ...

  5. Android使用SAX解析XML(4)

    util.java文件如下: package com.hzhi.my_sax; import java.io.IOException; import java.io.InputStream; impo ...

  6. 解决SqlPlus前台程序出现中文乱码的问题

    在使用sqlplus的过程中,常常会遇到某一台机器在访问oracle数据库时中文显示乱码的问题,实际上这是因为客户端字符集和服务器字符集不一致导致的.在实际使用中,服务器字符集,客户端字符集和操作系统 ...

  7. 算法:欧几里得求最大公约数(python版)

    #欧几里得求最大公约数 #!/usr/bin/env python #coding -*- utf:8 -*- #iteration def gcd(a,b): if b==0: return a e ...

  8. windows不能显示此连接属性。windows management instrumentation (WMI) 信息可能损坏

    Windows Management Instrumentation (WMI)信息可能损坏错误修复 在 查看“本地连接”的属性,并切换到“高级”选项卡后,提示:“Windows不能显示此连接的属性. ...

  9. com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure 解决办法

    09:00:30.307 [http-8080-6] ERROR org.hibernate.transaction.JDBCTransaction -JDBC begin failed com.my ...

  10. NProgress.js template

    NProgress.js:加载进度条:http://ricostacruz.com/nprogress/ 基础的这几个方法 这个网站上都有 我在一个地方看到这个代码 NProgress.configu ...