jquery，checkbox无法用attr()二次勾选
今晨，漂亮的测试妹妹提了个奇怪的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()二次勾选的更多相关文章
- jquery easyui datagrid 获取Checked选择行(勾选行)数据
原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSel ...
- 解决jquery操作checkbox火狐下第二次无法勾选问题
最近在学习jQuery(版本jquery-1.9.1.js),要求用jQuery实现全选/全不选.反选,在IE(IE8)中没有问题,但在火狐浏览器中调试的时候出现了一些小问题,达不到效果. html代 ...
- jquery checkbox反复调用attr('checked', true/false)只有第一次生效 Jquery 中 $('obj').attr('checked',true)失效的几种解决方案
1.$('obj').prop('checked',true) 2. $(':checkbox').each(function(){ this.checked=true; }) 为什么:attr为失效 ...
- jquery checkbox反复调用attr('checked', true/false)只有第一次生效
/** * 全选 */ function checkAll() { $("input[name=ids]").attr("checked", true); } ...
- jquery checkbox checked 却不显示对勾
$("input").attr("checked", true); 或 $("input").attr("checked" ...
- jQuery版本引发的血案 iframe error 和 checkbox 无法勾选
问题介绍: 1.由于我们的项目里面用了很多Iframe,在初始话加载的时候页面就会报错.一开始调试很久没找到什么原因,看打印结果页面会被两次load,只能一步步找, 最后发现在document rea ...
- jQuery获取及设置单选框、多选框、文本框内容
获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var item = $(&qu ...
- jQuery获取及设置单选框、多选框、文本框
获取一组radio被选中项的值 var item = $("input[@name=items][@checked]").val(); 获取select被选中项的文本 var it ...
- jquery,attr,prop,checkbox标签已有checked=checked但是不显示勾选
最近在做项目的过程中碰到了这样的一个问题:在使用bootstrap模态框的过程中,在模态框中有一个checkbox标签,一开始是为选中的,当点击触发模态框按钮,选中chcekbox时,会显示勾选,这个 ...
随机推荐
- Php与Erlang的Socket通信
一般来说网络通讯经常使用的方式有2种:文本通讯和二进制通讯. php与erlang之间实现文本通讯比較简单.这里就不做讨论,本文主要讨论的是php与erlang实现二进制通讯的实现方法.实现过程 ...
- 1z0-052 q209_10
10: A user, who is authenticated externally, logs in to a remote machine and connects to the databas ...
- Unix 网络编程 读书笔记2
第三章 套接字编程简介 每一个 Socket 都用一个半相关描述:{协议,本地地址,本地端口}一个完整的 Socket 则用一个相关描述{协议,本地地址,本地端口,远程地址,远程端口}每一个 Sock ...
- spyder python 相关
1.python开发集成工具Spyder中,如何设置变量成员提示和代码补全呢? 答: pip install rope,安装好rope 就可以了 2.最常用的是:tap的制动补全 (IPython c ...
- JavaScript实现碰撞检测（分离轴定理）
概述 分离轴定理是一项用于检测碰撞的算法.其适用范围较广,涵盖检测圆与多边形,多边形与多边形的碰撞:缺点在于无法检测凹多边形的碰撞.本demo使用Js进行算法实现,HTML5 canvas进行渲染. ...
- Vijos1935不可思议的清晨题解
- 题目来源 https://vijos.org/p/1935 描写叙述 今天,是2015年2月14日,星期六,情人节. 这真是一个不可思议的日子.今天早上.我打开窗户,太阳居然从西側升了起来. 我与 ...
- Visual C#两分钟搭建BHO IE钩子
微软在1997年正式推出Browser Helper Object (BHO), 使程序员能够更好的对IE进行二次开发和操作. 在通过编写BHO程序数月后, 我希望把我的一些经验告诉才开始的同志, 避 ...
- 让 linux centos 文件夹地址栏 位置栏显示出来的方法
今天又拿起心爱的 linux ,发现多日不用又忘记了不少知识了 , 发现忘记的速度真是惊人的! 设置方法: 编辑-> 首选项-> 勾选 总是在浏览器窗口中打开, 如图:
- [转载]打造自己喜欢的Linux桌面----archlinux
原文地址:打造自己喜欢的Linux桌面----archlinux作者:三尺椴 打造自己的Linux桌面----Archlinux 2011-01-16 文/s_cd ( 常用桌面组合:Archlin ...
- HDUOJ---2112HDU Today
HDU Today Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...