一功能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. js实现unicode码字符串与utf8字节数据互转

    js的string变量存储字符串使用的是unicode编码,要保存时必须选择其他编码后进行传输,比如转成utf-8,utf-32等.存储到数据库中为utf-8编码,读取出来如何转换成正确的字符串就成了 ...

  2. POJ 2773 Happy 2006------欧几里得 or 欧拉函数。

    Happy 2006 Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 8359   Accepted: 2737 Descri ...

  3. R语言与.net 集成开发入门

    首先:R语言的基本教程: https://www.yiibai.com/r/r_environment_setup.html 下载R语言的安装包:https://cran.r-project.org/ ...

  4. java 正则表达式（内附例子）

    前言:最近工作中遇到了大量用正则表达式的情况,需要用一定的规则匹配字符串,然后提取里面的数据,格式化后转成自己想要的格式.所以作为一个菜鸟是时候再来巩固一下正则表达式了.转载请注明出处:https:/ ...

  5. 用正则表达式修改html字符串的所有div的style样式

    最近项目中有一接口返回的一个字段是html格式的字符串,里边每个div中style的高度是固定的px,然后再手机端显示的时候发现,div中的内容重叠了:效果图如下: 对应的div如下: 由于高度固定, ...

  6. 有趣：256个class选择器可以干掉1个id选择器——张鑫旭

    我们应该都知道,从选择器得分权重上将,id选择器(#aaa{})和class选择器(.aaa{})完全不是一个数量级的,前者:1-0-0; 而后者为0-1-0.因此: #id { color:dark ...

  7. Apache安装完后加入系统服务的相关操作详解

    Apache源码安装完毕后, 1.下面的脚本运行后就可以直接使用service apachexxx stop/start 来控制apache的启动与停止了! cp /usr/local/apache/ ...

  8. VC++ 共享内存读写操作

    此解决方案含两个工程文件,一个是写操作工程文件,即把任意字符串写入创建的共享内存里,另外一个读操作工程文件,则是读取共享内存里的数据,从而实现了进程之间的共享内存读写操作. 源码下载

  9. 如何从 GitHub 上下载单个文件夹

    DownGit 好用记得回来点赞(建议***)

  10. Sink Prosessor - Flume的可靠性保证：故障转移、负载均衡

    Flume的一些组件(如Spooling Directory Source.File Channel)能够保证agent挂掉后不丢失数据. 1.负载均衡 1)Load balancing Sink P ...