Développement jQuery de la mise en œuvre de la fonction de panier d'achat

Dans cette section, nous utiliserons le code jQuery pour implémenter divers modules fonctionnels du panier.

Y compris les fonctions de sélection de tout, d'inversion de la sélection et d'annulation de la case à cocher du produit.

Utilisez la case à cocher <input id="Checkbox1" type="checkbox" class="allselect"/> pour tout sélectionner, utilisez l'événement click, lorsque nous cliquons

Lors de la sélection tous, tous les <input type="checkbox"> La sélection inversée signifie que toutes les sélections sont sélectionnées par défaut, puis toutes les sélections sont désélectionnées lorsque nous cliquons. L'opération d'annulation est similaire à

. La différence est que lorsqu'il n'y a pas de sélection, cliquer sur Annuler signifie sélectionner ; lorsqu'il y a une sélection, cliquer sur Annuler signifie ne pas sélectionner.

<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>

La fonction d'augmentation et de diminution de la quantité de produit calcule automatiquement le prix sous-total de le produit en cliquant sur l'augmentation ou la diminution du produit.

Définissez l'identifiant par <input id="">. Lorsque vous cliquez sur le bouton "+", la quantité de produit est de +1. Lorsque vous cliquez sur le bouton "-", le produit. la quantité est de -1. Le prix sous-total et le prix total de l'article changeront également en conséquence.

Il y a quelque chose auquel les amis doivent faire attention. Lorsque la quantité de marchandises est réduite à 0, cliquer sur le bouton "-" rendra la quantité de marchandises négative, ce qui est déraisonnable.

Ainsi, lorsque la quantité de produit est de 0, cliquez sur le bouton "-", la quantité de produit ne sera plus de -1, et la page de prix total du produit ne sera plus réduite.

<!---商品加减算总数---->
<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>

Calculez la quantité totale et le prix total des marchandises sélectionnées en cliquant pour sélectionner

<!---总数---->
<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>

Remarque :

longueur les attributs peuvent être définis Ou renvoyer le nombre d'éléments dans le tableau