今晨，漂亮的测试妹妹提了个奇怪的bug，说我一功能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>

1.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>

2.html

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

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

摘抄如下：“As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.”

jquery，checkbox无法用attr()二次勾选的更多相关文章

  1. jquery easyui datagrid 获取Checked选择行(勾选行)数据

    原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSel ...

  2. 解决jquery操作checkbox火狐下第二次无法勾选问题

    最近在学习jQuery(版本jquery-1.9.1.js),要求用jQuery实现全选/全不选.反选,在IE(IE8)中没有问题,但在火狐浏览器中调试的时候出现了一些小问题,达不到效果. html代 ...

  3. jquery checkbox反复调用attr('checked', true/false)只有第一次生效 Jquery 中 $('obj').attr('checked',true)失效的几种解决方案

    1.$('obj').prop('checked',true) 2. $(':checkbox').each(function(){ this.checked=true; }) 为什么:attr为失效 ...

  4. jquery checkbox反复调用attr('checked', true/false)只有第一次生效

    /** * 全选 */ function checkAll() { $("input[name=ids]").attr("checked", true); } ...

  5. jquery checkbox checked 却不显示对勾

    $("input").attr("checked", true); 或 $("input").attr("checked" ...

  6. jQuery版本引发的血案 iframe error 和 checkbox 无法勾选

    问题介绍: 1.由于我们的项目里面用了很多Iframe,在初始话加载的时候页面就会报错.一开始调试很久没找到什么原因,看打印结果页面会被两次load,只能一步步找, 最后发现在document rea ...

  7. jQuery获取及设置单选框、多选框、文本框内容

    获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var item = $(&qu ...

  8. jQuery获取及设置单选框、多选框、文本框

    获取一组radio被选中项的值 var item = $("input[@name=items][@checked]").val(); 获取select被选中项的文本 var it ...

  9. jquery,attr,prop,checkbox标签已有checked=checked但是不显示勾选

    最近在做项目的过程中碰到了这样的一个问题:在使用bootstrap模态框的过程中,在模态框中有一个checkbox标签,一开始是为选中的,当点击触发模态框按钮,选中chcekbox时,会显示勾选,这个 ...

随机推荐

  1. Android 逆向project 实践篇

    Android逆向project 实践篇 上篇给大家介绍的是基础+小Demo实践. 假设没有看过的同学能够进去看看.(逆向project 初篇) 本篇主要给大家介绍怎样反编译后改动源代码, 并打包执行 ...

  2. java多线程解决应用挂死的问题

    这两天为了定位JBOSS老是挂死的问题,学习了一下JAVA多线程方面的知识,在此总结一下 1.在Java程序中,JVM负责线程的调度.线程调度是指按照特定的机制为多个线程分配CPU的使用权. 调度的模 ...

  3. 如何更改删除window服务？

    Cmd 下输入 sc delete 服务名 想要看服务名直接cmd下输入services.msc 打开服务, 例如删除apache服务 命令:sc delete Apache2.4

  4. LogUtils.java

    package com.xdsjs.save.utils; /** * 日志相关管理类 * Created by xdsjs on 2015/10/13. */ import android.util ...

  5. webservice系统学习笔记7-使用handler实现过滤器/拦截器效果

    handler可以作用于客户端,也可以作用了服务端 handler分为:1.LogicalHandler:只能获取到soap消息的body. 2.SOAPHandler:可以获取SOAPMessage ...

  6. LoadRunner如何监控Linux系统资源

    LoadRunner如何监控Linux系统资源 一 简述:LoadRunner监控Linux资源时弹出如下错误: Monitor name :UNIX Resources. Cannot initia ...

  7. openfire + spark 展示组织机构(客户端)

    在spark 加一个插件用于展示组织机构, 参考了好多人的代码 插件主类增加一个 TAB用于展示机构树 package com.salesoa.orgtree; import java.net.URL ...

  8. HighCharts/Highstock使用小结,使用汉化及中文帮助文档

       此文档是本人在开发过程图形报表时使用HighCharts所遇到的问题及解决方案 .最后附上有HighCharts中文帮助文档 HighCharts  版本:Highcharts-3.0.1 Hi ...

  9. mysql中innodb和myisam的区别

    InnoDB和MyISAM是很多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,5.7之后就不一样了 1.事务和外键 InnoDB具有事务,支持4个事务隔离级别,回滚,崩溃修复能力和多版 ...

  10. tomcat占用cpu过高解决办法

    在工作中经常遇到tomcat占用cpu居高不下,针对这种情况有以下处理办法进行排查. jps --> 查看java的进程 top -Hp pid --> 根据jps得到的进程号(pid), ...