Jquery全选与反选点击执行一次的解决方案
在做项目时遇到一个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 全选 反选 获取Table 中指定td的元素值
//全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...
- Jquery全选与反选checkbox(代码示例)
今天在公司要实现操作权限的功能,需要根据左边的树,选择一项,判断右边的操作权限,例如,增加,修改,删除,查看等按钮的显示与隐藏: 这个功能实现思路如下: 1.操作权限:增加.修改等按钮的ID和Text ...
- Jquery全选系列操作(锋利的jQuery)
Jquery全选系列操作(锋利的jQuery) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
- jQuery全选与反选,且解决点击只执行一次的问题
<html> <head> <script src="jquery-1.11.1.min.js" type="text/javascript ...
- Jquery 实现添加删除,checkbok 的全选,反全选,但是批量删除没有实现
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title& ...
- JQuery全选Prop(“check”,true)和attr("attr",true)区别
$scope.selectAll = false; //点击单选框的时候是不是全选 $scope.checkIsAll = function(){ var wipeCheckBoxObj = $(&q ...
- Jquery全选单选功能
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx. ...
- Jquery 全选、反选问题解析
最近工作中,需要使用Jquery实现复选框的全选和反选,本人虽然不是专职撸前端的,但这个小问题感觉也没什么难度,下面直接上代码: <div id="list"> < ...
- 关于JQuery全选/反选第二次失效的问题
最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...
随机推荐
- 树链剖分【p4116】Qtree3 - Query on a tree
Description 给出N个点的一棵树(N-1条边),节点有白有黑,初始全为白 有两种操作: 0 i : 改变某点的颜色(原来是黑的变白,原来是白的变黑) 1 v : 询问1到v的路径上的第一个黑 ...
- 【块状链表】AutSky_JadeK的块状链表模板+总结(STL版)
Part 1.块状链表. 定位 插入 删除 数组 O(1) O(n) O(n) 链表 O(n) O(1) O(1) 对于线性表的以上常见操作来说,数组和链表都无法有效地解决.但是,若我们将链表的每 ...
- 【动态规划】【记忆化搜索】CODEVS 1010 过河卒 2002年NOIP全国联赛普及组
f(i,j)=f(i-1,j)+f(i,j-1),显然可以暴力递归求解,但是很多重复的状态,所以可以记忆下来. 注意障碍点和边界的特判. #include<cstdio> #include ...
- 【Python笔记】Python语言基础
Python是一种解释性(没有编译).交互式.面向对象的语言 1.安装python编译器 版本:Python2.7比较普遍,Python不是向下兼容的软件,因此Python3.x有些东西不好找资料 2 ...
- 【k8s】了解一下k8s
了解一下k8s 地址: https://www.kubernetes.org.cn/doc-11
- leetcode笔记:Word Ladder
一. 题目描写叙述 Given two words (start and end), and a dictionary, find the length of shortest transformat ...
- linux过滤ip地址
一.系统版本 [root@zabbix-server tmp]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) 二.用awk ...
- php中将SimpleXMLElement Object数组转化为普通数组
做微信开发,鉴于微信POST的消息是XML数据包,通过SimpleXMLElement Object获取的数据不好操作,需要转化为普通数组. 网上找了很多方法都不理想,发现通过json_decode和 ...
- css水平竖直居中方式
CSS水平和垂直居中的几种实现方法: 1.单行垂直居中 文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的 ...
- Mycat探索之旅(4)----Mycat的自增长主键和返回生成主键ID的实现
说明:MyCAT自增长主键和返回生成主键ID的实现 1) mysql本身对非自增长主键,使用last_insert_id()是不会返回结果的,只会返回0:这里做一个简单的测试 创建测试表 ------ ...