Title1

Title2

Title3

6-1 判斷 checkbox 是否選取,實現全選跟全部取消

  1. 範例
    
      <script>
        $(document).ready(function() {  
          var IdTable = $("#tbin");//得到表格的jquery对象 
          var cancelBtn = IdTable.find(".cancelBtn");//得到所有的按鈕对象 
      
          //全部沖完
          $('#tbin').on("click","#cancelBtn", function(){
            var idBalance = parseInt($('#balance').html());//可沖款餘額
            if(this.checked){
              //全選要做的事
              cancelBtn.each(function(i){    
                var total = parseInt($(this).parents('tr:first').find(".total").html());//貨單金額       
                var pay = parseInt($(this).parents('tr:first').find(".pay").html());//已付金額     
                var balance = parseInt($(this).parents('tr:first').find(".balance").html());//貨單餘額
                // 貨單餘額 = 貨單金額 - 已付金額 - 沖銷金額 
                if(idBalance > balance){
                  //可沖款餘額 > 貨單餘額
                  // 沖銷金額 = balance
                  $(this).parents('tr:first').find(".cancel").val(balance);//寫入沖銷金額
                  $(this).parents('tr:first').find(".balance").html(0);//貨單餘額
                  idBalance -= balance;
                  $(this).prop('checked', 'checked');
                } else {
                  //可沖款餘額 <= 貨單餘額 
                  $(this).parents('tr:first').find(".cancel").val(idBalance);//寫入沖銷金額
                  $(this).parents('tr:first').find(".balance").html(total + pay  - idBalance);//貨單餘額
                  idBalance = 0;
                  $(this).prop('checked', true);//  'checked'            
                  //計算小計
                  UpdateTotal();
                  return false;               
                }
              });//遍历结束
    
            }else{
              //全不選
              //location.reload();
              //清掉所有 .cancel 與 清掉選擇          
              cancelBtn.each(function(i){ 
    
                var total = parseInt($(this).parents('tr:first').find(".total").html());//貨單金額       
                var pay = parseInt($(this).parents('tr:first').find(".pay").html());//已付金額
                $(this).parents('tr:first').find(".balance").html(total - pay);//貨單餘額     
                
                //清掉沖銷金額
                $(this).parents('tr:first').find(".cancel").val(0);//寫入沖銷金額 
                //清掉選擇
                $(this).prop('checked', false);
                UpdateTotal(); 
              });//遍历结束
            };
          });
        
    
          //個別沖
          $('#tbin').on("click",".cancelBtn", function(){
            var target = $(this);
            var vTr = target.parents("tr:first");//得到父tr对象;
            var sn= vTr.attr("data-sn");//取得 明細sn       
      
            if(this.checked){
              //單選
              alert(sn+"選取");
            }else{
              //單取消
               alert(sn+"未被選取");
            };
          });  
    
          $('input').keypress(function(e) {
            code = e.keyCode ? e.keyCode : e.which; // in case of browser compatibility
            if(code == 13) {
              e.preventDefault();
              // do something
              /* also can use return false; instead. */
            }
          });
    
          //計算小計
          UpdateTotal();
    
    
        });
    
    
        //處理單筆小計與合計、運費、小計
        function UpdateTotal()
        {      
          var Ttotal=Tpay=Tcancel=Tbalance=0;// 初始值为0;
          var IdTable=$("#tbin");//得到表格的jquery对象
          var cancelBtn = IdTable.find(".cancelBtn");//得到所有的按鈕对象 
    
          cancelBtn.each(function(i){    
            var total = parseInt($(this).parents('tr:first').find(".total").html());//貨單金額       
            var pay = parseInt($(this).parents('tr:first').find(".pay").html());//已付金額       
            var cancel = parseInt($(this).parents('tr:first').find(".cancel").val());//沖銷金額     
            var balance = parseInt($(this).parents('tr:first').find(".balance").html());//貨單餘額      
    
            //得到總計
            Ttotal += total  ;//貨單金額累計
            Tpay += pay  ;//付款金額累計
            Tcancel += cancel  ;//沖銷金額累計
            Tbalance += balance  ;//貨單餘額 累計
    
          });//遍历结束
    
          $("#Ttotal").html(Ttotal);
          $("#Tpay").html(Tpay);
          $("#Tcancel").html(Tcancel);
          $("#Tbalance").html(Tbalance);
        }           
    
    
      </script>

     

  2.