jquery购物车php,jQuery开发购物车功能实现

本节我们将通过使用jQuery代码来实现购物车的各项功能模块。

包括商品的点击复选框的全选，反选，取消功能。

通过复选框来进行全选的操作，使用click事件，当我们点击

全选时，所有的被选中。反选就是先默认为全部选中，当我们点击时则取消全部选择。取消操作也是

类似，区别为没有选择时，点取消就是选择；有选择时，点取消就是不选。

$(document).ready(function () {

//jquery特效制作复选框全选反选取消(无插件)

// 全选

$(".allselect").click(function () {

if(this.checked){

$(".gwc_tb2 input[name=newslist]").prop("checked",true);

} else{

$(".gwc_tb2 input[name=newslist]").prop("checked",false);

$(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" });

}

GetCount();

});

//反选

$("#invert").click(function () {

$(".gwc_tb2 input[name=newslist]").each(function () {

if ($(this).prop("checked")) {

$(this).prop("checked", false);

$(this).next().css({ "background-color": "#ffffff", "color": "#000000" });

} else {

$(this).prop("checked", true);

$(this).next().css({ "background-color": "#3366cc", "color": "#000000" });

}

});

GetCount();

});

//取消

$("#cancel").click(function () {

$(".gwc_tb2 input[name=newslist]").each(function () {

$(this).prop("checked", false);

$(this).next().css({ "background-color": "#ffffff", "color": "#000000" });

});

GetCount();

});

// 所有复选(:checkbox)框点击事件

$(".gwc_tb2 input[name=newslist]").click(function () {

if ($(this).prop("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 () {

GetCount();

});

});

//获取数量

function GetCount() {

var conts = 0;

var aa = 0;

$(".gwc_tb2 input[name=newslist]").each(function () {

if ($(this).prop("checked")) {

for (var i = 0; i 

conts += parseInt($(this).val());

aa += 1;

}

}

});

$("#shuliang").text(aa);

$("#zong1").html((conts).toFixed(2)); //toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

$("#jz1").css("display", "none");

$("#jz2").css("display", "block");

}

商品数量增加，减少功能，通过点击商品的增加减少自动计算出商品的小计价格。

通过设置id来进行操作，当点击“ + ”按键时，商品数量+1，当点击 “ - ”按键时，商品数量-1。商品小计价格和总价格也会随之变化。

这里有一个需要朋友们注意的地方，当商品数量减少为0时，点击“ - ”按键商品数量就会为负数，是不合情理的。

所以就需要当商品数量为0时，点击 “ - ”按键，商品数量不会再-1，商品总价页不会再减少。

$(function () {

var t = $("#text_box1");

$("#add1").click(function () {

t.val(parseInt(t.val()) + 1);

setTotal(); GetCount();

});

$("#min1").click(function () {

if(parseInt(t.val() - 1) 

return false;

}else {

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();

})

通过点击选择来计算选中商品总量和总价格

$(function () {

$(".quanxun").click(function () {

setTotal();

//alert($(lens[0]).text());

});

function setTotal() {

var len = $(".tot");

var num = 0;

for (var i = 0; i 

num = parseInt(num) + parseInt($(len[i]).text());

}

//alert(len.length);

$("#zong1").text(parseInt(num).toFixed(2));

$("#shuliang").text(len.length);

}

//setTotal();

})

注释：

length 属性可设置或返回数组中元素的数目