本節(jié)我們將透過使用jQuery程式碼來實現(xiàn)購物車的各項功能模組。

包含商品的點擊複選框的全選，反選，取消功能。

透過<input id="Checkbox1" type="checkbox" ?class="allselect"/>複選框來進(jìn)行全選的操作，使用click事件，當(dāng)我們點擊

全選時，所有的<input type="checkbox">被選中。反選就是先預(yù)設(shè)全部選中，當(dāng)我們點擊時則取消全部選擇。取消操作也是

類似，區(qū)別為沒有選擇時，點取消就是選擇；有選擇時，點取消就是不選。

<script type="text/javascript">
$(document).ready(function () {
      //jquery特效制作復(fù)選框全選反選取消(無插件)
      // 全選
      $(".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();
      });

      // 所有復(fù)選(: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();     
      });
   });
   //獲取數(shù)量
   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 四舍五入為指定小數(shù)位數(shù)的數(shù)字。
      $("#jz1").css("display", "none");
      $("#jz2").css("display", "block");
   }
</script>

商品數(shù)量增加，減少功能，透過點擊商品的增加減少自動計算出商品的小計價格。

透過<input id="">設(shè)定id來進(jìn)行操作，當(dāng)點擊「 + 」按鍵時，商品數(shù)量+1，當(dāng)點擊「 - 」按鍵時，商品數(shù)量-1 。商品小計價格和總價格也會隨之變動。

這裡有一個需要朋友們注意的地方，當(dāng)商品數(shù)量減少為0時，點擊「 - 」按鍵商品數(shù)量就會為負(fù)數(shù)，是不合情理的。

所以就需要當(dāng)商品數(shù)量為0時，點選 「 - 」按鍵，商品數(shù)量不會再-1，商品總價頁不會再減少。

<!---商品加減算總數(shù)---->
<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>

透過點擊選擇來計算選取商品總量和總價格

<!---總數(shù)---->
<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 屬性可設(shè)定或傳回數(shù)組中元素的數(shù)目