一功能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. MYSQL与MSSQL对比学习

    最近在将公司的一个产品里面相关的MSSQL语句修改为可以在MYSQL上执行的语句 l  优点分析: MYSQL短小精悍,容易上手,操作简单,免费供用的.相对其它数据库有特色又实用的语法多一些.SQL怎 ...

  2. 鼠标键盘失灵对策（Windows8.1）

    Win8.1虽然比Windows Server 2008R2开关机速度快好多.可惜用了一年后发现Win8.1 大bug. 鼠标键盘老是失灵... 对应方案: 1. 将鼠标键盘的USB插头更换位置,比如 ...

  3. .NET中的异步编程

    开篇 异步编程是程序设计的重点也是难点,还记得在刚开始接触.net的时候,看的是一本c#的Winform实例教程,上面大部分都是教我们如何使用Winform的控件以及操作数据库的实例,那时候做的基本都 ...

  4. Session、Cookie简单理解

    Session: session是一种记录客户状态的机制,session是保存在服务器上的,当浏览器访问服务器的时候,服务器把客户端信息以某种形式记录在服务器上,这就是所谓的session,当浏览器再 ...

  5. Android微信支付SDK开发

    一.准备工作 1.开发平台及SDK下载 微信开放平台 https://open.weixin.qq.com 下载SDK 微信支付Demo下载 http://pay.weixin.qq.com/wiki ...

  6. linux 获取命令或配置文件的帮助信息 man、whatis、apropos、--help

    man /usr/bin/man man [命令或配置文件]获取帮助信息 man ls /-lman date/-d man services //不需要添加绝对路径/etc/services NAM ...

  7. 关于wp-autopost不能连续采集的问题，这里有解决方案

    经常采集一页两页就停下来了 完整的解决方案如下: php.ini 中 max_execution_time = 0 的设置只针对PHP本身起作用php-fpm 模式下 需要修改的参数是 php-fpm ...

  8. Python基础第一篇-------python的介绍

    一.python的介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为了在阿姆斯特丹打发时间,决心开发一个新的脚本 ...

  9. SQL语句还原数据库并移动文件到指定路径

    用SQL语句还原数据库时如果不指定数据库文件的存储路径,则默认把数据文件和日志文件存放到与原数据库相同的文件路径中,这样可能会产生错误,比如执行下面的语句: restore database Smar ...

  10. linux soft

    1.gdebi:可以使用gdebi来安装deb包,默认的deb安装使用的dpkg,dpkg 安装的缺点就是不解决包依赖关系 sudo apt-get install gdebi 当然也可以通过命令,使 ...