Jquery全选与反选点击执行一次的解决方案
2023-09-11 14:19:38 时间
在做项目时遇到一个bug,checkbox全选与反选功能,只能点击一次,再点就不起作用了,为了解决此问题,我查找了好多资料,下面把具体解决方案整理分享给大家,需要的朋友可以参考下:
代码需求, 使用attr只能执行一次,使用prop则完美实现全选和反选,获取所有选中的项并把选中项的文本组成一个字符串。
存在bug的代码:只能全选一次就失效
$(document).ready(function(){ $("#CalculationAll").click(function(){ var ischecked = this.checked; $("form input").each(function(){ if($(this).val()!='CalculationAll') { $(this).attr("checked",ischecked);//每一项都选中 attr ,这个有问题,选中一次下一次就失效 } calculationAll();//计算购物车选中总价格 }); }); }); function calculationAll() { count = 0; $("form input").each(function(){ if($(this).val()!='CalculationAll') {//过滤全选input goodsId = $(this).val(); if(this.checked) { num = parseInt($("#num_"+goodsId).text()); price = parseFloat($("#price_"+goodsId).text()); count = count+(num * price); } } }); $('#count').text(count.toFixed(2)); }
修正后的代码:
$(document).ready(function(){ $("#CalculationAll").click(function(){ var ischecked = this.checked; $("form input").each(function(){ if($(this).val()!='CalculationAll') { $(this).prop("checked",ischecked);//选中或取消选择,做全选用 } calculationAll();//计算选中物品的价格 }); }); });
参考:http://www.jb51.net/article/71067.htm
相关文章
- jQuery显示隐藏密码插件jquery.toggle-password演示
- [JQuery] jQuery选择器ID、CLASS、标签获取对象值、属性、设置css样式
- DOM元素加载之前执行的jQuery代码
- jQuery_serialize的用法
- jquery赋值
- jQuery动画的实现
- jQuery.validator 验证规则详解
- jQuery插件开发的模式和结构
- 前端-jQuery-基本介绍
- jQuery Custom Selector JQuery自定义选择器
- JQuery模板插件-jquery.tmpl
- WhatsApp - jQuery 聊天插件
- IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载),按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取
- 原生js与jQuery显示隐藏div的几种方法
- jquery属性的相关js实现方法
- 使用jquery实现省市二级列表
- DOM和jquery对象之间的转换
- JQuery 选择器总结
- 白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连续7-电话问卷调查