jQuery开发购物车功能实现
本节我们将通过使用jQuery代码来实现购物车的各项功能模块。
包括商品的点击复选框的全选,反选,取消功能。
通过<input id="Checkbox1" type="checkbox" class="allselect"/>复选框来进行全选的操作,使用click事件,当我们点击
全选时,所有的<input type="checkbox">被选中。反选就是先默认为全部选中,当我们点击时则取消全部选择。取消操作也是
类似,区别为没有选择时,点取消就是选择;有选择时,点取消就是不选。
<script type="text/javascript"> $(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 < $(this).length; 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"); } </script>
商品数量增加,减少功能,通过点击商品的增加减少自动计算出商品的小计价格。
通过<input id="">设置id来进行操作,当点击“ + ”按键时,商品数量+1,当点击 “ - ”按键时,商品数量-1。商品小计价格和总价格也会随之变化。
这里有一个需要朋友们注意的地方,当商品数量减少为0时,点击“ - ”按键商品数量就会为负数,是不合情理的。
所以就需要当商品数量为0时,点击 “ - ”按键,商品数量不会再-1,商品总价页不会再减少。
<!---商品加减算总数----> <script type="text/javascript"> $(function () { var t = $("#text_box1"); $("#add1").click(function () { t.val(parseInt(t.val()) + 1); setTotal(); GetCount(); }); $("#min1").click(function () { if(parseInt(t.val() - 1) < 0){ 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(); }) </script>
通过点击选择来计算选中商品总量和总价格
<!---总数----> <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>
注释:
length 属性可设置或返回数组中元素的数目