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 属性可设置或返回数组中元素的数目