как сделать на опции выбора исключить значения или включить значения

Question

как динамически изменять значения, когда я вводил или стирал значения «корабль» и как это делать, включает налог 13% и исключает налог на опцию выбора с общей суммой. Вот мой код: Jsfifddle

<script> 
(function() { 
"use strict"; 

$("table").on("change", "input", function() { 
var row = $(this).closest("tr"); 
var qty = parseFloat(row.find(".quantity").val()); 
var price = parseFloat(row.find(".productprice").val()); 
var tcost = qty * price; 
row.find(".tcost").val(isNaN(tcost) ? "" : tcost); 

var totalValue = 0; 
$(document).find(".tcost").each(function(){ 
totalValue += parseFloat($(this).val()); 
}); 
var tax = totalValue * 13/100; 
$("#tax").val(tax); 

totalValue = totalValue + tax; 

var ship = $('#ship').val(); 
totalValue = parseFloat(totalValue) + parseFloat(ship); 


$("#total").val(totalValue); 
}); 

})(); 
</script> 

Answer 1

Я не хочу обидеть, но ваш код нуждается в помощи. Во-первых, позвольте мне проделать вам некоторые исправления в вашем HTML.

<tr for="input01"> неправ. <tr> не имеет атрибута for. Вам также нужно выделить свои атрибуты для действительного HTML.

Ваша строка <input type='text' class="tax" id="tax" name="tax" placeholder="Tax amount" class="price" disabled/> имеет два атрибута класса.

Теперь, для исправлений. В основном причина, почему ваш код был провал была два раза:

• Номер против ParseFloat: Функция преобразования Number типа данных в JavaScript обрабатывается несколько иначе, чем parseFloat, особенно когда дело доходит до пустой строки. Number превратит '' в 0, тогда как parseFloat превратит его в NaN.

• Область: Ваш row.find(class) метод не распространяется на налоговых и судоходных областях, потому что те, которые не были частью таблицы. Кроме того, ваш обработчик событий был только для <table>, но калькуляторы для доставки и налогов были вне table, в body или даже document. В результате, когда вы попытались получить доступ к методу .val() на row.find('.shipping'), вы получили NaN.

  Далее в этом пункте ваш второй аргумент для обработчика событий был input, без каких-либо условий для события изменения select.

I've fixed your code with a jsFiddle where I address these issues and fix your HTML as well. Если ссылка становится недоступной, я включил код ниже.

HTML

<table class="table table-bordered inventory" style="width:95%;float:right;"> 
    <thead> 
     <tr> 
      <th> 
       <input class='check_all' type='checkbox' onclick="select_all()" /> 
      </th> 
      <th>S. No</th> 
      <th>Product Name</th> 
      <th>Item Code</th> 
      <th>Quantity</th> 
      <th>Price per Quantity</th> 
      <th>Total</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <input type='checkbox' class='case' /> 
      </td> 
      <td><span id='snum'>1.</span> 

      </td> 
      <td> 
       <input type='text' id='productname_1' name='productname[]' required /> 
      </td> 
      <td> 
       <input type='text' id='itemcode_1' name='itemcode[]' required /> 
      </td> 
      <td> 
       <input type='text' class="number quantity" id='quantity_1' name='quantity[]' style="width:165px;" required /> 
      </td> 
      <td> 
       <input type='text' class="number productprice" id='productprice_1' name='productprice[]' style="width:165px;" required /> 
      </td> 
      <td> 
       <input type='text' class="number tcost" id='tcost_1' name='tcost[]' style="width:165px;" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 
<div class="" style="width:280px; float:right;"> 
    <br> 
    <label>Tax Type 
     <select class="number" style="margin-left: 8px;" id="taxoptions" required> 
      <option value="">Select Tax Type</option> 
      <option value="excludetax">Exclude Tax</option> 
      <option value="Includetax">Include Tax</option> 
     </select> 
    </label> 
    <br> 
    <label style="margin-left: 33px;">13% 
     <input type='text' class="tax" id="tax" name="tax" placeholder="Tax amount" disabled /> 
     <br> 
     <br> 
    </label> 
    <input type='text' id='ship' name='ship' placeholder="shipping amount" class="ship" style="margin-left: 51px;" /> 
    <br> 
    <br> 
    <input type='text' id='total' name='total' placeholder="Total amount" class="total" style="margin-left: 60px;" /> 
    <br> 
    <br> 
    <label class="checkbox inline" style="margin-left: 60px;"> 
     <input id="inlineCheckbox1" type="checkbox" value="sendemail">Send E-mail</label> 
    <br> 
    <br> <span> 
                <input type="submit" value="submit" name="submit" class='btn btn-success' style="width:100px; margin-left: 54px;" /> 
                <button type="button" class='btn btn-success' style="width:100px; margin-left: 22px;">Print</button> 
               </span> 

</div> 

Javascript

(function() { 

    $(document).on("change", "input, select", function (e) { 
     var row = $(this).closest("tr"); 
     var qty = Number(row.find(".quantity").val()); 
     var price = Number(row.find(".productprice").val()); 
     var ship = Number($("#ship").val()); 
     var tcost = 0; 
     tcost = qty * price; 
     var totalValue = 0; 
     var taxAmount = 0; 

     row.find(".tcost").val(isNaN(tcost) ? "" : tcost); 
     totalValue += Number($("#tcost_1").val()); 
     console.log(row.find(".tcost").val()); 

     if ($('#taxoptions').val() != 'Includetax') { 
      taxAmount = 0; 
      $('#tax').val(taxAmount); 
     } else { 
      taxAmount = totalValue * .13; 
      $('#tax').val(taxAmount); 
     } 


     totalValue += Number(taxAmount + ship); 

     $('#total').val(totalValue); 

    }); 

})();