CheckBox（グリッドビューのヘッダーと行）のチェック時に値を計算する方法は？

Question

私はヘッダーのチェックボックスにチェックしない問題を取得しています

は、以下に私はC＃からではないのjQueryによって結合している私のGridViewのあるAjaxの

最初のシナリオ：ヘッダーチェックである場合 - AMT計算が適正である

第二：間違っている複数の行のチェックボックスを1つずつ すなわち手動でチェックされているとき、私はいずれかの行をオフにしてから、私は、ヘッダーのチェックボックスをチェックし、金額 がcalucated取得：チェックを外しAMTが正しく

サードをクリアしたときに？

ヘッダーチェックで問題が発生しました。この部分では失敗しました。ここで

は私のテーブルには、これまでのところ、私が何をしたか

のように見えるです：

$("[id*=chkHeader]").live("click", function() { 
      debugger; 
      var chkHeader = $(this); 
      var grid = $(this).closest("table"); 
      $("input[type=checkbox]", grid).each(function (i) { 
       if (chkHeader.is(":checked")) { 
        $(this).attr("checked", "checked"); 

        if (i >= 1) { 
         if (isNaN($('[id*= txttcfsa]').val()) && isNaN($('[id*= txtcodex]').val())) { 
          $('[id*= txttcfsa]').val(totalPrice.toFixed(2)); 
          $('[id*= txtcodex]').val(totalCodex.toFixed(2)); 
         } else { 
          /* if (grid[0].firstElementChild.childNodes[i].cells[4].firstElementChild.checked != true) {*/ 
           //$('#ctl00_hldPage_txttcfsa').val(0); 
           //$('#ctl00_hldPage_txtcodex').val(0); 

           TCFSA = $('[id*= lbtcfsa]').html(); 
           totalPrice = parseFloat(TCFSA); 
           Codex = $('[id*= lbcodex]').html(); 
           totalCodex = parseFloat(Codex); 
           EarlierTCFSAValue = parseFloat($('[id*= txttcfsa]').val()); 
           EarlierCodexAValue = parseFloat($('[id*= txtcodex]').val()); 

            TCFSTotalBal = parseFloat(EarlierTCFSAValue) + parseFloat(totalPrice); 
            CodexTotalBal = parseFloat(EarlierCodexAValue) + parseFloat(totalCodex); 

           $('[id*= txttcfsa]').val(TCFSTotalBal.toFixed(2)); 
           $('[id*= txtcodex]').val(CodexTotalBal.toFixed(2)); 
          } 
         } 

        /* }*/ 
       } else { 
        $(this).removeAttr("checked"); 


         if (isNaN($('[id*= txttcfsa]').val()) && isNaN($('[id*= txtcodex]').val())) { 
          $('[id*= txttcfsa]').val(totalPrice.toFixed(2)); 
          $('[id*= txtcodex]').val(totalCodex.toFixed(2)); 
         } else { 
          TCFSAAmtRemaning = 0; 
          CodexAmtRemaning = 0; 
          $('[id*= txttcfsa]').val(TCFSAAmtRemaning.toFixed(2)); 
          $('[id*= txtcodex]').val(CodexAmtRemaning.toFixed(2)); 
         } 

       } 
      }); 


     }); 
     $("[id*=chkRow]").live("click", function() { 
      debugger; 
      var grid = $(this).closest("table"); 
      var chkHeader = $("[id*=chkHeader]", grid); 
      if (!$(this).is(":checked")) { 
       chkHeader.removeAttr("checked"); 

       TCFSA = $('[id*= lbtcfsa]').html(); 
       minusprice = parseFloat(TCFSA); 
       Codex = $('[id*= lbcodex]').html(); 
       minusCodex = parseFloat(Codex); 

       if ((isNaN($('[id*= txttcfsa]').val())) && isNaN($('[id*= txtcodex]').val())) { 
        $('[id*= txttcfsa]').val(minusprice.toFixed(2)); 
        $('[id*= txtcodex]').val(minusCodex.toFixed(2)); 

       } 
       else { 
        TCFSAAmtRemaning = parseFloat($('[id*= txttcfsa]').val()); 
        TCFSAAmtRemaning = parseFloat(TCFSAAmtRemaning); 
        CodexAmtRemaning = parseFloat($('[id*= txtcodex]').val()); 
        CodexAmtRemaning = parseFloat(CodexAmtRemaning); 
        TCFSAAmtRemaning = TCFSAAmtRemaning - minusprice; 
        CodexAmtRemaning = CodexAmtRemaning - minusCodex; 

        $('[id*= txttcfsa]').val(TCFSAAmtRemaning.toFixed(2)); 
        $('[id*= txtcodex]').val(CodexAmtRemaning.toFixed(2)); 
       } 


      } else { 
       if ($("[id*=chkRow]", grid).length == $("[id*=chkRow]:checked", grid).length) { 
        chkHeader.attr("checked", "checked"); 

        TCFSA = $('[id*= lbtcfsa]').html(); 
        totalPrice = parseFloat(TCFSA); 
        Codex = $('[id*= lbcodex]').html(); 
        totalCodex = parseFloat(Codex); 
        EarlierTCFSAValue = parseFloat($('[id*= txttcfsa]').val()); 
        EarlierCodexAValue = parseFloat($('[id*= txtcodex]').val()); 
        TCFSTotalBal = parseFloat(EarlierTCFSAValue) + parseFloat(totalPrice); 
        CodexTotalBal = parseFloat(EarlierCodexAValue) + parseFloat(totalCodex); 
        $('[id*= txttcfsa]').val(TCFSTotalBal.toFixed(2)); 
        $('[id*= txtcodex]').val(CodexTotalBal.toFixed(2)); 
       } 
       else { 
        TCFSA = $('[id*= lbtcfsa]').html(); 
        totalPrice = parseFloat(TCFSA); 
        Codex = $('[id*= lbcodex]').html(); 
        totalCodex = parseFloat(Codex); 
        if (isNaN($('[id*= txttcfsa]').val()) && isNaN($('[id*= txtcodex]').val())) { 
         $('[id*= txttcfsa]').val(totalPrice.toFixed(2)); 
         $('[id*= txtcodex]').val(totalCodex.toFixed(2)); 
        } else { 

         TCFSTotalBal = ($('[id*= txttcfsa]').val()); 
         TCFSTotalBal = parseFloat(TCFSTotalBal); 
         CodexTotalBal = parseFloat($('[id*= txtcodex]').val()); 
         CodexTotalBal = parseFloat(CodexTotalBal); 
         TCFSTotalBal = parseFloat(TCFSTotalBal) + parseFloat(totalPrice); 
         CodexTotalBal = CodexTotalBal + totalCodex; 

         $('[id*= txttcfsa]').val(TCFSTotalBal.toFixed(2)); 
         $('[id*= txtcodex]').val(CodexTotalBal.toFixed(2)); 
        } 

       } 
      } 
     }); 

ハーズは私のaspxデザインあなたの第一は、追加している

<asp:GridView ID ="grd_cfs" runat="server" AutoGenerateColumns="false" > 
<asp:TemplateField HeaderText="TCFSA" ItemStyle-HorizontalAlign="Center" HeaderStyle-CssClass="header-color"> 
            <ItemTemplate> 
             <asp:Label ID="lbtcfsa" runat="server" Text='<%# Eval("TCFSA")%>'></asp:Label> 

            </ItemTemplate> 

           </asp:TemplateField> 
           <asp:TemplateField HeaderText="CODEX" ItemStyle-HorizontalAlign="Center" HeaderStyle-CssClass="header-color"> 
            <ItemTemplate> 
             <asp:Label ID="lbcodex" runat="server" Text='<%# Eval("CODEX")%>'></asp:Label> 

            </ItemTemplate> 
           </asp:TemplateField> 
            <asp:TemplateField HeaderText="Select" HeaderStyle-CssClass="header-color" ItemStyle-HorizontalAlign="Center"> 
                <HeaderTemplate> 
                 <asp:CheckBox ID="chkHeader" runat="server" /> 
                </HeaderTemplate> 
                <ItemTemplate> 
                 <asp:CheckBox ID="chkRow" runat="server" /> 
                </ItemTemplate> 
               </asp:TemplateField> 
</asp:GridView > 

<asp:TextBox ID ="txttcfsa" runat="server" ></asp:TextBox> 
<asp:TextBox ID ="txtcodex" runat="server" > 

Answer 1

コードを簡略化することができます。あなたが処理する必要がある2つのイベントがあります。

1. 行のチェックボックスが変更された場合：の状態をヘッダに全ての行のチェックボックスを設定し、その後、行変更のイベントをトリガ：
ヘッダチェックボックスが変更され
2. チェックされ、すべてのチェックボックスを見つける2列から値を合計します

ここで実行されているスニペットです：

//event handler for row clicks 
 
$(".chkRow").on("change", function() { 
 
    var totaltcfsa = 0; 
 
    var totalcodex = 0; 
 

 
    //loop through each checked row and sum the different columns 
 
    $(".chkRow:checked").each(function() { 
 
    var chk = $(this); 
 
    var tcfsa = chk.parent().siblings(":nth-child(3)").text(); 
 
    var codex = chk.parent().siblings(":nth-child(4)").text(); 
 
    totaltcfsa += parseFloat(tcfsa); 
 
    totalcodex += parseFloat(codex); 
 
    }); 
 

 
    //display results 
 
    $("#totaltcfsa").val(totaltcfsa.toFixed(2)); 
 
    $("#totalcodex").val(totalcodex.toFixed(2)); 
 
}); 
 

 
//event handler for header click 
 
$("#chkHeader").on("change", function() { 
 
    var checked = this.checked; 
 

 
    //set all rows to the same as the header 
 
    $(".chkRow").prop("checked", checked); 
 

 
    //trigger row changed event 
 
    $(".chkRow").trigger("change"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<table border="1"> 
 
    <tr> 
 
    <th>CFS Name</th> 
 
    <th>Amount</th> 
 
    <th>TCFSA</th> 
 
    <th>CODEX</th> 
 
    <th><input type="checkbox" id="chkHeader"/></th> 
 
    </tr> 
 
    <tr> 
 
    <td>TRANSWORLD GLS INDIA</td> 
 
    <td>2000.00</td> 
 
    <td>1420.00</td> 
 
    <td>580.00</td> 
 
    <td><input type="checkbox" class="chkRow"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>TRANSWORLD GLS INDIA</td> 
 
    <td>2000.00</td> 
 
    <td>1420.00</td> 
 
    <td>580.00</td> 
 
    <td><input type="checkbox" class="chkRow"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>TRANSWORLD GLS INDIA</td> 
 
    <td>2000.00</td> 
 
    <td>1420.00</td> 
 
    <td>580.00</td> 
 
    <td><input type="checkbox" class="chkRow"></td> 
 
    </tr> 
 
</table> 
 
Total TCFSA <input id="totaltcfsa" /> 
 
Total Codex <input id="totalcodex" />

Answer 2

ですすべてのTDのID、以下のクエリを書く

<script type="text/javascript">  
    $("[id*=chkHeader]").live("click", function() {  
      $("[id*=txttcfsa]").val($(".lbtcfsa", $(this).closest("tr")).html());  
      $("[id*=txtcedex]").val($(".lbcodex", $(this).closest("tr")).html());  
      return false;  
     });  
    </script>