jquery checkbox无法用attr()二次勾选问题的解决方法
2016-07-22 09:49
691 查看
今晨,漂亮的测试妹妹提了个奇怪的bug,说我一功能checkbox时隐时现,比如第一次打开有勾选,第n次打开可能就不选了。
想到与美女有亲密接触机会,马上鸡动起来。
经过偶层层抽次剥茧(da da jiang you),终于知道了原因:attr()在二次选中勾选框时,失效。
比如,如下HTML页面,一点【选中】、二点【取消选中】、三点【选中】,瞧,不行了呗。
1.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以上),如下代码:
2.html
<!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/
摘抄如下:“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操作checkbox火狐下第二次无法勾选的解决方法
- JQuery 设置checkbox值二次无效的解决方法
- jQuery 更改checkbox的状态,无效的解决方法
- jquery中checkbox全选失效的解决方法
- 多个jquery.datatable共存,checkbox全选异常的快速解决方法
- JQuery触发radio或checkbox的change事件
- jQuery判断checkbox是否选中的3种方法
- JQuery对checkbox操作 (循环获取)
- jquery操作复选框(checkbox)的12个小技巧总结
- JQUERY复选框CHECKBOX全选,取消全选
- Jquery遍历checkbox获取选中项value值的方法
- jQuery操作CheckBox的方法介绍(选中,取消,取值)
- jQuery中checkbox反复调用attr(''checked'', true/false)只有第一次生效的解决方法
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码