jquery中checkbox全选bug的全方位解析
来源:互联网 发布:淘宝网轮椅 编辑:程序博客网 时间:2024/06/16 19:51
上一个项目中在复选框的全选上遇到了一个很困惑的问题,以前用的好好的jquery代码突然不管用了,最后比对了好多遍,发现唯一不同的就是juquery版本,然后上网查了一下,是juery中版本更新后导致的一些列小bug。
为了能看的简洁明了,先上代码。
html代码:
<div class="like"> <input type="checkbox" value="篮球"/>篮球 <input type="checkbox" value="K歌"/>K歌 <input type="checkbox" value="游泳"/>游泳 <input type="checkbox" value="足球"/>足球 </div> <br/> <input type="checkbox" id="all"/>全选
引用新版本的jquery后出现bug的代码:
$("#all").click(function(){ alert($(this).attr("checked")); if($(this).attr("checked")){ $(".like :checkbox").attr("checked",true); }else{ $(".like :checkbox").attr("checked",false); } });
首先郑重声明:以上代码在低版本的jquery版本中绝对好使,且实际应用过。
alert($(this).attr("checked"));
在进一步的调试中,发现上面这行代码弹出的是 undefined(未定义),新的版本中已不支持这样的写法。
然后将以上判断是否选中代码改为:
$(this).is(":checked")
此代码能正确判断是否选中,但是只能被勾选一次第二次就失效了。
为了解决此bug,第二次选中时,在火狐中调试查看时发现checkbox中确实有checked属性,而且,值为checked,但是页面显示仍然为未选中状态
为此先附上bug完全解决后的代码:
$("#all").click(function(){ if($(this).prop("checked")){ $(".like :checkbox").prop("checked",true); }else{ $(".like :checkbox").removeAttr("checked",false); }});
在jquery1.6.1的版本中最大变化是增加了prop()方法,顾名思义:properties(性能),attributes(属性);基本是相通的,但是新版本中对这两种方法做出了明确的分工,一般用到js其值为boolean类型(例:checked,selected,readonly,disabled等)时,直接改用prop()方法,反之使用attr()方法。
结论:作为一名初学者,可能很少会有人去分析一些类库版本更新带来了哪些新变化,但是往往这些细微的变化可能就会引起一个很纠结的问题,希望以后自己可以紧跟大神们的脚步O(∩_∩)O
0 0
- jquery中checkbox全选bug的全方位解析
- jQuery中checkbox的全选与全部取消
- jQuery实现Checkbox中项目开发全选全不选的使用
- DataGrid中CheckBox的全选/取消全选
- 关于jquery中checkbox全选一次问题
- HTML 中 checkbox 的全选
- web中 checkbox的全选
- jQuery--checkbox全选/取消全选
- jQuery--checkbox全选/取消全选
- jQuery--checkbox全选/取消全选
- jquery checkbox全选取消全选
- jQuery--checkbox全选/取消全选
- jQuery--checkbox全选/取消全选
- JQuery checkBox 全选 、获取选中的个数
- checkBox 全选框的 jQuery实现
- JQuery实现的 checkbox 全选、反选。
- jquery checkbox 全选/全不选 的通用写法
- jQuery实现的Checkbox“全选/全不选”
- DOM(三)-04-(示例-下拉菜单-选择颜色)
- android usb解析(一)UsbDeviceManager(and5.1)
- C++中字符串分割的常用函数
- 二值化函数Threshold
- Python下多项式数据拟合 (Numpy)
- jquery中checkbox全选bug的全方位解析
- 【EasyUi】页面设计必学之Layout
- 用Node写的一个控制台看股票的小程序
- OSCache使用指南
- nagios3 添加Python编写的插件
- 慕课学习c笔记03-字符串函数
- Dev gridControl(2)
- boost 1.56.0 编译及使用
- DOM(三)-05-(示例-下拉菜单-选择城市)