Jquery属性セレクタが最初の変更イベントで機能しない

Question

アイテムの税金なし合計金額を計算するテーブルがあります（Item Price * Quantity - Discount%）。

税金を含まない合計金額に、VATまたはSATのいずれかまたは両方を追加するオプションがあります。 VATの金額を確認すると、Total Amountがテキストボックス（Total Amount Without Tax + VAT/SAT）に表示されます。この機能はcalculateTotalBill()機能で実装されています。問題は、初めての変更イベントCheckboxes（VAT/SAT）にNaNと表示されていることです。その後の変更イベントでは、関数はうまく動作します。以下は

はスニペット私が間違っているのは何

function getPrice(element) { 
 
     var itemPrice = $(element).closest('tr').find('td:eq(1) input'); 
 
     $itemId = $(element).val(); 
 
     itemPrice.val(5); 
 
     calculateAmount(element); 
 
    } 
 

 
    function calculateAmount(element) { 
 
     var itemPrice = $(element).closest('tr').find('td:eq(1) input').val() == "" ? 0 : $(element).closest('tr').find('td:eq(1) input').val(); 
 
     var quantity = $(element).closest('tr').find('td:eq(2) input').val() == "" ? 0 : $(element).closest('tr').find('td:eq(2) input').val(); 
 
     var discount = $(element).closest('tr').find('td:eq(3) input').val() == "" ? 0 : $(element).closest('tr').find('td:eq(3) input').val(); 
 
     var amount = $(element).closest('tr').find('td:eq(4) input'); 
 
     var calcAmount = parseFloat(itemPrice) * parseInt(quantity) - (parseFloat(itemPrice) * parseInt(quantity) * parseFloat(discount)/100); 
 
     amount.val(calcAmount); 
 
     calculateTotal(); 
 
    } 
 

 
    function calculateTotal() { 
 
     var sum = 0; 
 
     $('#mptblBill tbody tr').each(function() { 
 
      sum = parseFloat(sum) + parseFloat($(this).find('td:eq(4) input').val()); 
 
     }); 
 
     $('#txtTotalWdoutTax').val(sum); 
 
    } 
 

 
    function calculateTax(element) { 
 
     var amount = $('#txtTotalWdoutTax').val(); 
 
     var taxAmount = amount * parseFloat($(element).val())/100; 
 
     if ($(element).is(":checked")) { 
 
      $(element).closest('td').next('td').find('input').val(taxAmount); 
 
     } 
 
     else { 
 
      $(element).closest('td').next('td').find('input').val(0); 
 
     } 
 
     calculateTotalBill(); 
 
    } 
 

 
    function calculateTotalBill() { 
 
     var amount = $('#txtTotalWdoutTax').val(); 
 
     var taxTotal = 0; 
 
     $('#calcTable tbody tr').each(function() { 
 
      var a = $(this).find('td:eq(1) input[name^="txt_"]').length; 
 
      var b = $(this).find('td:eq(1) input[name^="txt_"]').val(); 
 
      if (a > 0) { 
 
       taxTotal = parseFloat(taxTotal) + parseFloat(b); 
 
      } 
 
     }); 
 
     $('#txtTotal').val(parseFloat(amount) + parseFloat(taxTotal)); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table style="width: 95%;" id="mptblBill" class="no-footer dataTable" role="grid"> 
 
    
 
    <tbody> 
 
      
 
    <tr role="row" class=""> 
 
       <td> 
 
        <select onchange="getPrice(this);" id="ddlItemId_0"> 
 
          <option value="1">Crocin Medicine</option> 
 
          <option value="3">DCold Total</option> 
 
          <option value="4">Rice</option> 
 
        </select> 
 
       </td> 
 
       <td><input type="text" disabled="disabled" class="width100" value="" id="txtItemPrice_0"></td> 
 
       <td><input type="text" onchange="calculateAmount(this);" class="width100" value="" id="txtQuantity_0"></td> 
 
       <td><input type="text" onchange="calculateAmount(this);" class="width100" value="" id="txtDiscount_0"></td> 
 
       <td><input type="text" disabled="disabled" class="width100" value="" id="txtAmount_0"></td> 
 
       <td><input type="button" class="width100" value="+" id="btnAdd_0"></td> 
 
      </tr></tbody> 
 
<thead> 
 
     <tr role="row"><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 216px;">Item Name</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Item Price</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Quantity</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Discount</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Amount</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 109px;">Action</th></tr> 
 
    </thead> 
 
</table> 
 
<table id="calcTable" style="width:100%; margin-left:32%;"> 
 
    <tbody> 
 
     <tr> 
 
      <td colspan="6"> 
 
       <label class="pullRight">Total Amount Without Tax </label> 
 
      </td> 
 
      <td colspan="2"> 
 
       <input type="text" style="width:188px;" value="" disabled="disabled" id="txtTotalWdoutTax"> 
 
      </td> 
 
     </tr> 
 
      <tr> 
 
       <td colspan="6"> 
 
        <input type="checkbox" onchange="calculateTax(this);" value="12" style="display:inline" id="chkTax_1" class="pullRight"><label style="display:inline" class="pullRight"> VAT - 12 % </label> 
 
       </td> 
 
       <td colspan="2"> 
 
        <input type="text" style="width:188px;" value="" disabled="disabled" name="txt_1"> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td colspan="6"> 
 
        <input type="checkbox" onchange="calculateTax(this);" value="2" style="display:inline" id="chkTax_2" class="pullRight"><label style="display:inline" class="pullRight"> SAT - 2 % </label> 
 
       </td> 
 
       <td colspan="2"> 
 
        <input type="text" style="width:188px;" value="" disabled="disabled" name="txt_2"> 
 
       </td> 
 
      </tr> 
 
     <tr> 
 
      <td colspan="6"> 
 
       <label class="pullRight">Total Amount </label> 
 
      </td> 
 
      <td colspan="2"> 
 
       <input type="text" style="width:188px;" value="" disabled="disabled" id="txtTotal"> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

のですか？どんな助けもありがとう。

Answer 1

この

function getPrice(element) { 
 
     var itemPrice = $(element).closest('tr').find('td:eq(1) input'); 
 
     $itemId = $(element).val(); 
 
     itemPrice.val(5); 
 
     calculateAmount(element); 
 
    } 
 

 
    function calculateAmount(element) { 
 
     var itemPrice = $(element).closest('tr').find('td:eq(1) input').val() == "" ? 0 : $(element).closest('tr').find('td:eq(1) input').val(); 
 
     var quantity = $(element).closest('tr').find('td:eq(2) input').val() == "" ? 0 : $(element).closest('tr').find('td:eq(2) input').val(); 
 
     var discount = $(element).closest('tr').find('td:eq(3) input').val() == "" ? 0 : $(element).closest('tr').find('td:eq(3) input').val(); 
 
     var amount = $(element).closest('tr').find('td:eq(4) input'); 
 
     var calcAmount = parseFloat(itemPrice) * parseInt(quantity) - (parseFloat(itemPrice) * parseInt(quantity) * parseFloat(discount)/100); 
 
     amount.val(calcAmount); 
 
     calculateTotal(); 
 
    } 
 

 
    function calculateTotal() { 
 
     var sum = 0; 
 
     $('#mptblBill tbody tr').each(function() { 
 
      sum = parseFloat(sum) + parseFloat($(this).find('td:eq(4) input').val()); 
 
     }); 
 
     $('#txtTotalWdoutTax').val(sum); 
 
    } 
 

 
    function calculateTax(element) { 
 
     var amount = $('#txtTotalWdoutTax').val(); 
 
     var taxAmount = amount * parseFloat($(element).val())/100; 
 
     if ($(element).is(":checked")) { 
 
      $(element).closest('td').next('td').find('input').val(taxAmount); 
 
     } 
 
     else { 
 
      $(element).closest('td').next('td').find('input').val(0); 
 
     } 
 
     calculateTotalBill(); 
 
    } 
 

 
    function calculateTotalBill() { 
 
     var amount = $('#txtTotalWdoutTax').val()==''?0:$('#txtTotalWdoutTax').val(); 
 
     var taxTotal = 0; 
 
     $('#calcTable tbody tr').each(function() { 
 
      var a = $(this).find('td:eq(1) input[name^="txt_"]').length; 
 
      var b = $(this).find('td:eq(1) input[name^="txt_"]').val(); 
 
      if (a > 0) { 
 
       taxTotal = parseFloat(taxTotal) + parseFloat(b==''?0:b); 
 
      } 
 
     }); 
 
     $('#txtTotal').val(parseFloat(amount) + parseFloat(taxTotal)); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table style="width: 95%;" id="mptblBill" class="no-footer dataTable" role="grid"> 
 
    
 
    <tbody> 
 
      
 
    <tr role="row" class=""> 
 
       <td> 
 
        <select onchange="getPrice(this);" id="ddlItemId_0"> 
 
          <option value="1">Crocin Medicine</option> 
 
          <option value="3">DCold Total</option> 
 
          <option value="4">Rice</option> 
 
        </select> 
 
       </td> 
 
       <td><input type="text" disabled="disabled" class="width100" value="" id="txtItemPrice_0"></td> 
 
       <td><input type="text" onchange="calculateAmount(this);" class="width100" value="" id="txtQuantity_0"></td> 
 
       <td><input type="text" onchange="calculateAmount(this);" class="width100" value="" id="txtDiscount_0"></td> 
 
       <td><input type="text" disabled="disabled" class="width100" value="" id="txtAmount_0"></td> 
 
       <td><input type="button" class="width100" value="+" id="btnAdd_0"></td> 
 
      </tr></tbody> 
 
<thead> 
 
     <tr role="row"><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 216px;">Item Name</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Item Price</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Quantity</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Discount</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Amount</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 109px;">Action</th></tr> 
 
    </thead> 
 
</table> 
 
<table id="calcTable" style="width:100%; margin-left:32%;"> 
 
    <tbody> 
 
     <tr> 
 
      <td colspan="6"> 
 
       <label class="pullRight">Total Amount Without Tax </label> 
 
      </td> 
 
      <td colspan="2"> 
 
       <input type="text" style="width:188px;" value="" disabled="disabled" id="txtTotalWdoutTax"> 
 
      </td> 
 
     </tr> 
 
      <tr> 
 
       <td colspan="6"> 
 
        <input type="checkbox" onchange="calculateTax(this);" value="12" style="display:inline" id="chkTax_1" class="pullRight"><label style="display:inline" class="pullRight"> VAT - 12 % </label> 
 
       </td> 
 
       <td colspan="2"> 
 
        <input type="text" style="width:188px;" value="" disabled="disabled" name="txt_1"> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td colspan="6"> 
 
        <input type="checkbox" onchange="calculateTax(this);" value="2" style="display:inline" id="chkTax_2" class="pullRight"><label style="display:inline" class="pullRight"> SAT - 2 % </label> 
 
       </td> 
 
       <td colspan="2"> 
 
        <input type="text" style="width:188px;" value="" disabled="disabled" name="txt_2"> 
 
       </td> 
 
      </tr> 
 
     <tr> 
 
      <td colspan="6"> 
 
       <label class="pullRight">Total Amount </label> 
 
      </td> 
 
      <td colspan="2"> 
 
       <input type="text" style="width:188px;" value="" disabled="disabled" id="txtTotal"> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table>