Pembangunan jQuery pelaksanaan fungsi troli beli-belah

Dalam bahagian ini kami akan menggunakan kod jQuery untuk melaksanakan pelbagai modul berfungsi troli beli-belah.

Termasuk fungsi memilih semua, menyongsangkan pemilihan dan membatalkan kotak semak klik produk.

Gunakan kotak pilihan <input id="Checkbox1" type="checkbox" class="allselect"/> semua, semua <jenis input="kotak semak"> Pemilihan songsang bermakna semua pilihan dipilih secara lalai, dan kemudian semua pilihan dinyahpilih apabila kami mengklik. Operasi pembatalan adalah serupa dengan

Bezanya apabila tiada pilihan, klik Batal bermakna memilih apabila ada pilihan, klik Batal bermakna tidak memilih.

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

Fungsi peningkatan dan penurunan kuantiti produk secara automatik mengira harga subjumlah

produk dengan mengklik kenaikan atau penurunan produk.

Tetapkan id dengan <input id=""> Apabila butang "+" diklik, kuantiti produk ialah +1 Apabila butang "-" diklik, produk kuantiti ialah -1. Harga subjumlah item dan jumlah harga juga akan berubah dengan sewajarnya.

Berikut adalah perkara yang perlu kawan-kawan ambil perhatian Apabila kuantiti barang dikurangkan kepada 0, klik butang "-" akan menyebabkan kuantiti barang menjadi negatif, yang tidak munasabah.

Jadi apabila kuantiti produk ialah 0, klik butang "-", kuantiti produk tidak lagi menjadi -1, dan jumlah halaman harga produk tidak akan dikurangkan lagi.

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

Kira jumlah kuantiti dan jumlah harga barang yang dipilih dengan mengklik untuk memilih

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

Nota:

panjang

atribut boleh ditetapkan Atau kembalikan bilangan elemen dalam tatasusunanbahagian seterusnya