一功能checkbox时隐时现，比如第一次打开有勾选，第n次打开可能就不选了。

经过偶层层抽次剥茧（da da jiang you），终于知道了原因：attr()在二次选中勾选框时，失效。

比如，如下HTML页面，一点【选中】、二点【取消选中】、三点【选中】，瞧，不行了呗。

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>prop demo</title>

  <style>

  img {

    padding: 10px;

  }

  div {

    color: red;

    font-size: 24px;

  }

  </style>

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>

  <input type="checkbox" checked="checked">

  <input type="checkbox">

  <input type="checkbox">

  <input type="checkbox" checked="checked">

<script>

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {

  return !val;

});

</script>

</body>

</html>

解决方案，是使用prop()替换attr()方法（在Jquery1.6以上），如下代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Attr checked</title>

<script type="text/javascript" src="./js/jquery-1.11.2.js"></script>

<script type="text/javascript">

    function switchChecked(flag) {

        $("input[type='checkbox']").prop('checked', flag);

    }

</script>

</head>

<body>

    <input type="checkbox" />

    <input type="button" onclick="switchChecked(true)" value="选中">

    <input type="button" onclick="switchChecked(false)" value="取消选中">

</body>

</html>

关于官方文档，见：http://api.jquery.com/attr/

或者http://api.jquery.com/prop/

转自:http://www.cnblogs.com/nick-huang/p/4436421.html

attr全选第三次失效的更多相关文章

  1. 关于JQuery全选/反选第二次失效的问题

    最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...

  2. 【jQuery】CheckBox使用attr全选无法正确显示

    今天编写JS脚本时,遇到如下的问题. 下面是源代码: <script src="../Scripts/jquery-2.1.3.js"></script> ...

  3. 使用el-checkbox实现全选，点击失效没有反应

    最近在公司接收到了一个需求,给收藏夹的书籍添加批量.全选删除实现思路:点击全选改变item的checked,改变item的checked,重新便利一下所有item的checked来改变全选的selec ...

  4. Jquery 1.8全选反选删除选中项实现

    JQuery1.6以后,Prop的出现,让1.6以下的全选反选效果全部失效了.以下是修正后的版本: 全选反选效果: $(".checkbox").click(function () ...

  5. Jquery全选与反选点击执行一次的解决方案

    在做项目时遇到一个bug,checkbox全选与反选功能,只能点击一次,再点就不起作用了,为了解决此问题,我查找了好多资料,下面把具体解决方案整理分享给大家,需要的朋友可以参考下: 代码需求, 使用a ...

  6. 实现CheckBox的三种选中状态（全选、半选、不选）在GridView中模拟树形的功能

    度娘了很多帖子,只说三种状态要用图片替换来做,但没找到有用的例子,被逼自己写了一个 三方控件肯定是很多的,如jstree,可以直接用 由于公司的UDS限制,不能上传图片,只能文字说明了. 就是要在gr ...

  7. jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法

    如下图: <head> <title></title> <style type="text/css"> div { border: ...

  8. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

  9. 问题1：jquery实现全选功能，第二次失效（已解决）

    问题:使用了attr("checked",true”)设置子复选框的被选状态,第一次执行功能正常,但第二次失效. 解决方案:将attr("checked",tr ...

随机推荐

  1. Q：链表的中间元素

    问题:如何得到一个链表的中间元素?   相信,这个问题对于刚入门编程的人来说,都不会难,最自然而然的想法是先遍历一遍链表,统计链表中的元素的个数,之后,再走一遍链表,所走的步长为链表长度的一半.这样就 ...

  2. c#之new关键词——隐藏基类方法

    当从基类继承了一个(非抽象成员时),也就继承了父类的实现代码.如果是virtual成员,可以override:另外一种方法也能隐藏父类的实现代码(虚成员和非虚成员都可使用):定义与父类相同的方法名,加 ...

  3. HDU3533(KB2-D)

    Escape Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  4. 小tip: 某简单的字符重叠与图形生成----张鑫旭

    引言 字符重叠不是什么稀奇的东西. 如1像素错位模拟阴影效果: 或者powerFloat中展示的带边框三角: 以及其他很多. 但是技术这东西不是豆腐,老了可以吃,臭了也可以吃:那我这里还拿着个说事作甚 ...

  5. HTML5之新增的属性和废除的属性 （声明：内容节选自《HTML 5从入门到精通》）

    新增的属性 1.表单相关的属性 ———————————————————————————————————————————————————————— •autocomplete 属性 autocomple ...

  6. HiveSql调优经验

    背景 在刚使用hive的过程中,碰到过很多问题,任务经常需要运行7,8个小时甚至更久,在此记录一下这个过程中,我的一些收获 join长尾 背景 SQL在Join执行阶段会将Join Key相同的数据分 ...

  7. Android分享---调用系统自带的分享功能

    以前我们总想到友盟等平台分享功能的集成,集成这玩意还得下载对应的jar包.当然,用这些平台的分享并不是说什么好处都没有,至少人家的统计功能还是很实用的.不过有的时候我们是不需要多余功能的,只需要能分享 ...

  8. jedis spring集成

    jedis spring集成把jedis的核心对象交给spring管理.jedis核心对象:配置文件.连接池配置对象.连接池.集成方式有两种:spring-data-redis:自己封装 前提:要有一 ...

  9. MongoDB用户配置

    MongoDB学习笔记—权限管理 阅读目录 1.MongoDB权限介绍 2 MongoDB添加管理员账户 3 MongoDB开启用户权限验证 4 MongoDB的roles角色简单介绍 5 Mongo ...

  10. Oracle EBS 应收API只创建收款没有核销行以及消息堆栈

    只创建了收款但没有创建核销行 排除其他原因 有可能是缓存溢出导致的这个要改成true 且使用消息堆栈处理