장바구니 기능 구현의 jQuery 개발

이 섹션에서는 jQuery 코드를 사용하여 장바구니의 다양한 기능 모듈을 구현해 보겠습니다.

전체 선택, 선택 반전, 제품의 체크박스 클릭 취소 기능이 포함되어 있습니다.

클릭 이벤트를 사용하여 <input id="Checkbox1" type="checkbox" class="allselect"/> 확인란을 사용하여

모두 선택을 클릭하면 모두< ;입력됩니다. 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

속성은 배열의 요소 수를 설정하거나 반환할 수 있습니다다음 섹션