经验分享程序开发文档资料数据资源其它资源

jQuery添加购物车复选框js代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery添加购物车复选框js代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery添加购物车复选框js代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery��ӹ��ﳵ��ѡ��</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
<script type="text/javascript" src="js/Calculation.js"></script>
<script type="text/javascript">
$(document).ready(function () {

	//jquery��Ч������ѡ��ȫѡ��ѡȡ��(�޲��)
	// ȫѡ        
	$(".allselect").click(function () {
		$(".gwc_tb2 input[name=newslist]").each(function () {
			$(this).attr("checked", true);
			// $(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" });
		});
		GetCount();
	});

	//��ѡ
	$("#invert").click(function () {
		$(".gwc_tb2 input[name=newslist]").each(function () {
			if ($(this).attr("checked")) {
				$(this).attr("checked", false);
				//$(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
			} else {
				$(this).attr("checked", true);
				//$(this).next().css({ "background-color": "#3366cc", "color": "#000000" });
			} 
		});
		GetCount();
	});

	//ȡ��
	$("#cancel").click(function () {
		$(".gwc_tb2 input[name=newslist]").each(function () {
			$(this).attr("checked", false);
			// $(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
		});
		GetCount();
	});

	// ���и�ѡ(:checkbox)�����¼�
	$(".gwc_tb2 input[name=newslist]").click(function () {
		if ($(this).attr("checked")) {
			//$(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" });
		} else {
			// $(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
		}
	});

	// ���
	$(".gwc_tb2 input[name=newslist]").click(function () {
		// $("#total2").html() = GetCount($(this));
		GetCount();
		//alert(conts);
	});
});
//******************
function GetCount() {
	var conts = 0;
	var aa = 0;
	$(".gwc_tb2 input[name=newslist]").each(function () {
		if ($(this).attr("checked")) {
			for (var i = 0; i < $(this).length; i++) {
				conts += parseInt($(this).val());
				aa += 1;
			}
		}
	});
	$("#shuliang").text(aa);
	$("#zong1").html((conts).toFixed(2));
	$("#jz1").css("display", "none");
	$("#jz2").css("display", "block");
}
</script>


</head>
<body>

<div class="gwc" style=" margin:auto;">
	<table cellpadding="0" cellspacing="0" class="gwc_tb1">
		<tr>
			<td class="tb1_td1"><input id="Checkbox1" type="checkbox"  class="allselect"/></td>
			<td class="tb1_td1">ȫѡ</td>
			<td class="tb1_td3">��Ʒ</td>
			<td class="tb1_td4">��Ʒ��Ϣ</td>
			<td class="tb1_td5">����</td>
			<td class="tb1_td6">����</td>
			<td class="tb1_td7">����</td>
		</tr>
	</table>
		   
	<!---��Ʒ�Ӽ�������---->
	<script type="text/javascript">
	$(function () {
		var t = $("#text_box1");
		$("#add1").click(function () {
			t.val(parseInt(t.val()) + 1)
			setTotal(); GetCount();
		})
		$("#min1").click(function () {
			t.val(parseInt(t.val()) - 1)
			setTotal(); GetCount();
		})
		function setTotal() {

			$("#total1").html((parseInt(t.val()) * 9).toFixed(2));
			$("#newslist-1").val(parseInt(t.val()) * 9);
		}
		setTotal();
	})
	</script>
	
	<table cellpadding="0" cellspacing="0" class="gwc_tb2">
		<tr>
			<td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-1" /></td>
			<td class="tb2_td2"><a href="#"><img src="images/img1.jpg"/></a></td>
			<td class="tb2_td3"><a href="#">��Ʒ����</a></td>
			<td class="tb1_td4">һ��</td>
			<td class="tb1_td5">
				<input id="min1" name=""  style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
				<input id="text_box1" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;" />
				<input id="add1" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
			</td>
			<td class="tb1_td6"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
			<td class="tb1_td7"><a href="#">ɾ��</a></td>
		</tr>
	</table>
	
	<!---��Ʒ�Ӽ�������---->
	<script type="text/javascript">
	$(function () {
		var t = $("#text_box2");
		$("#add2").click(function () {
			t.val(parseInt(t.val()) + 1)
			setTotal(); GetCount();
		})
		$("#min2").click(function () {
			t.val(parseInt(t.val()) - 1)
			setTotal(); GetCount();
		})
		function setTotal() {

			$("#total2").html((parseInt(t.val()) * 8).toFixed(2));
			$("#newslist-2").val(parseInt(t.val()) * 8);
		}
		setTotal();
	})
	</script>
	<table cellpadding="0" cellspacing="0" class="gwc_tb2">
		<tr>
			<td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-2" /></td>
			<td class="tb2_td2"><a href="#"><img src="images/img2.jpg"/></a></td>
			<td class="tb2_td3"><a href="#">��Ʒ����</a></td>
			<td class="tb1_td4">һ��</td>
			<td class="tb1_td5">
				<input id="min2" name=""  style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
				<input id="text_box2" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;" />
				<input id="add2" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
			</td>
			<td class="tb1_td6"><label id="total2" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
			<td class="tb1_td7"><a href="#">ɾ��</a></td>
		</tr>
	</table>
	
	<!---����---->
	<script type="text/javascript">
	$(function () {
		$(".quanxun").click(function () {
			setTotal();
			//alert($(lens[0]).text());
		});
		function setTotal() {
			var len = $(".tot");
			var num = 0;
			for (var i = 0; i < len.length; i++) {
				num = parseInt(num) + parseInt($(len[i]).text());

			}
			//alert(len.length);
			$("#zong1").text(parseInt(num).toFixed(2));
			$("#shuliang").text(len.length);
		}
		//setTotal();
	})
	</script>
	<table cellpadding="0" cellspacing="0" class="gwc_tb3">
		<tr>
			<td class="tb1_td1"><input id="checkAll" class="allselect" type="checkbox" /></td>
			<td class="tb1_td1">ȫѡ</td>
			<td class="tb3_td1">
				<input id="invert" type="checkbox" />��ѡ
				<input id="cancel" type="checkbox" />ȡ��
			</td>
			<td class="tb3_td2">��ѡ��Ʒ <label id="shuliang" style="color:#ff5500;font-size:14px; font-weight:bold;">0</label> ��</td>
			<td class="tb3_td3">�ϼ�(�����˷�):<span>��</span><span style=" color:#ff5500;"><label id="zong1" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></span></td>
			<td class="tb3_td4"><span id="jz1">����</span><a href="#" style=" display:none;"  class="jz2" id="jz2">����</a></td>
		</tr>
	</table>
</div>
</body>
</html>

JS代码(Calculation.js):

/** jQuery Calculation Plug-in**/
(function($){
	var defaults ={
	reNumbers:/(-|-\$)?(\d+(,\d{
	3}
)*(\.\d{
	1,}
)?|\.\d{
	1,}
)/g,cleanseNumber:function (v){
	return v.replace(/[^0-9.\-]/g,"");
}
,useFieldPlugin:(!!$.fn.getValue),onParseError:null,onParseClear:null}
;
	$.Calculation ={
	version:"0.4.07",setDefaults:function(options){
	$.extend(defaults,options);
}
}
;
	$.fn.parseNumber = function(options){
	var aValues = [];
	options = $.extend(options,defaults);
	this.each(function (){
	var $el = $(this),sMethod = ($el.is(":input") ? (defaults.useFieldPlugin ? "getValue":"val"):"text"),v = $.trim($el[sMethod]()).match(defaults.reNumbers,"");
	if (v == null){
	v = 0;
	if (jQuery.isFunction(options.onParseError)) options.onParseError.apply($el,[sMethod]);
	$.data($el[0],"calcParseError",true);
}
else{
	v = options.cleanseNumber.apply(this,[v[0]]);
	if ($.data($el[0],"calcParseError") && jQuery.isFunction(options.onParseClear)){
	options.onParseClear.apply($el,[sMethod]);
	$.data($el[0],"calcParseError",false);
}
}
aValues.push(parseFloat(v,10));
}
);
	return aValues;
}
;
	$.fn.calc = function(expr,vars,cbFormat,cbDone){
	var $this = this,exprValue = "",precision = 0,$el,parsedVars ={
}
,tmp,sMethod,_,bIsError = false;
	for (var k in vars){
	expr = expr.replace((new RegExp("(" + k + ")","g")),"_.$1");
	if (!!vars[k] && !!vars[k].jquery){
	parsedVars[k] = vars[k].parseNumber();
}
else{
	parsedVars[k] = vars[k];
}
}
this.each(function (i,el){
	var p,len;
	$el = $(this);
	sMethod = ($el.is(":input") ? (defaults.useFieldPlugin ? "setValue":"val"):"text");
	_ ={
}
;
	for (var k in parsedVars){
	if (typeof parsedVars[k] == "number"){
	_[k] = parsedVars[k];
}
else if (typeof parsedVars[k] == "string"){
	_[k] = parseFloat(parsedVars[k],10);
}
else if (!!parsedVars[k] && (parsedVars[k] instanceof Array)){
	tmp = (parsedVars[k].length == $this.length) ? i:0;
	_[k] = parsedVars[k][tmp];
}
if (isNaN(_[k])) _[k] = 0;
	p = _[k].toString().match(/\.\d+$/gi);
	len = (p) ? p[0].length - 1:0;
	if (len > precision) precision = len;
}
try{
	exprValue = eval(expr);
	if (precision) exprValue = Number(exprValue.toFixed(Math.max(precision,4)));
	if (jQuery.isFunction(cbFormat)){
	var tmp = cbFormat.apply(this,[exprValue]);
	if (!!tmp) exprValue = tmp;
}
}
catch(e){
	exprValue = e;
	bIsError = true;
}
$el[sMethod](exprValue.toString());
}
);
	if (jQuery.isFunction(cbDone)) cbDone.apply(this,[this]);
	return this;
}
;
	$.each(["sum","avg","min","max"],function (i,method){
	$.fn[method] = function (bind,selector){
	if (arguments.length == 0)return math[method](this.parseNumber());
	var bSelOpt = selector && (selector.constructor == Object) && !(selector instanceof jQuery);
	var opt = bind && bind.constructor == Object ? bind:{
	bind:bind || "keyup",selector:(!bSelOpt) ? selector:null,oncalc:null}
;
	if (bSelOpt) opt = jQuery.extend(opt,selector);
	if (!!opt.selector) opt.selector = $(opt.selector);
	var self = this,sMethod,doCalc = function (){
	var value = math[method](self.parseNumber(opt));
	if (!!opt.selector){
	sMethod = (opt.selector.is(":input") ? (defaults.useFieldPlugin ? "setValue":"val"):"text");
	opt.selector[sMethod](value.toString());
}
if (jQuery.isFunction(opt.oncalc)) opt.oncalc.apply(self,[value,opt]);
}
;
	doCalc();
	return self.bind(opt.bind,doCalc);
}
}
);
	var math ={
	sum:function (a){
	var total = 0,precision = 0;
	$.each(a,function (i,v){
	var p = v.toString().match(/\.\d+$/gi),len = (p) ? p[0].length - 1:0;
	if (len > precision) precision = len;
	total += v;
}
);
	if (precision) total = Number(total.toFixed(precision));
	return total;
}
,avg:function (a){
	return math.sum(a) / a.length;
}
,min:function (a){
	return Math.min.apply(Math,a);
}
,max:function (a){
	return Math.max.apply(Math,a);
}
}
;
}
)(jQuery);

CSS代码(index.css):

*{margin:0px;padding:0px;border:0px;font-size:12px;color:#333;font-family:微软雅黑;}
ul li{list-style:none}
a{text-decoration:none;}
a:hover{color:#e46432;}
body{margin:auto;background:url(../images/bj.jpg);overflow-x:hidden;}
/*****购物车*********/
.gwc{width:950px;overflow:hidden;}
.gwc_tb1{width:100%;border-top:5px solid #48b9e5;background:#d0e7fa;height:38px;margin-top:20px;overflow:hidden;}
.tb1_td1{width:35px;text-align:center;}
.tb1_td3{width:290px;text-align:center;background:url(../images/td1.jpg) right no-repeat;}
.tb1_td4{width:260px;text-align:center;background:url(../images/td1.jpg) right no-repeat;}
.tb1_td5{width:115px;text-align:center;background:url(../images/td1.jpg) right no-repeat;}
.tb1_td6{width:135px;text-align:center;background:url(../images/td1.jpg) right no-repeat;}
.tb1_td7{text-align:center;}
.gwc_tb2{width:100%;margin-top:20px;background:#eef6ff;border:1px solid #e5e5e5;padding-top:20px;padding-bottom:20px;}
.tb2_td1{width:60px;text-align:center;}
.tb2_td2{width:100px;text-align:center;}
.tb2_td2 img{width:96px;height:96px;border:2px solid #c9c6c7;}
.tb2_td3{width:170px;padding-left:12px;padding-right:18px;}
.tb2_td3 a{font-size:14px;line-height:22px;}
.gwc_tb3{width:100%;border:1px solid #d2d2d2;background:#e7e7e7;height:46px;margin-top:20px;}
.gwc_tb3 tr td{font-size:14px;}
.tb3_td2{width:100px;text-align:center;}
.tb3_td2 span{color:#ff5500;font-size:14px;font-weight:bold;padding-left:5px;padding-right:5px;}
.tb3_td3{width:220px;text-align:center;}
.tb3_td3 span{font-size:18px;font-weight:bold;}
.tb3_td4{width:110px;text-align:center;}
.jz2{width:100px;height:46px;line-height:46px;text-align:center;font-size:18px;color:#fff;background:#ee0000;display:block;float:right;}
#jz1{font-size:18px;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
54.34 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
54.34 KB
立即下载
陆瑞红欢
了解
打赏作者 鼓励作者
jquery特效6
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章