使用jQuery对每次更改的输入求和

Question

我有以下代码，希望能够对每次更改的价格进行总结。

<table class="table table-striped table-bordered listItem">
    <tbody>
    <tr>
        <th width="20%">Quantity</th>
        <th width="50%">Item</th>
        <th width="20%">Price ($)</th>
        <th width="10%"></th>
    </tr>
    <tr>
        <td>
            <select class="form-control BIL_item_quantity" name="BIL_Daily_Charge[BIL_item_quantity][]"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
            </select>
        </td>
        <td>
            <select class="form-control BIL_item_id" name="BIL_Daily_Charge[BIL_item_id][]">
                <option value="">Select an item</option><option value="27" data-item-rate="6.00" data-item-taxes="4">Hot-Dog</option>
            </select>
        </td>
        <td>
            <input type="text" class="form-control BIL_item_rate" name="BIL_Daily_Charge[BIL_item_rate][]">
        </td>
        <td>
            <button type="button" class="btn btn-default removeItem"><i class="fa fa-times"></i></button>
        </td>
    </tr>
    </tbody>
</table>

完整代码在此处：https://jsfiddle.net/8ue9wtbe/

我尝试过的js代码如下：

$("select[name='BIL_Daily_Charge[BIL_item_quantity][]'], select[name='BIL_Daily_Charge[BIL_item_id][]']").on('propertychange change click keyup input paste', function() {
    var currSum = 0;
    var totalSum = 0;
    $("input[name='BIL_Daily_Charge[BIL_item_quantity][]']").each(function(){
        if($(this).val()=='') { currSum = 0; }
        else { currSum = parseFloat($(this).val()); }
        totalSum = currSum + totalSum;
    });
    $("#total_cost_extras").text(Math.round(totalSum * 100) / 100);
});

我错过了什么吗？

感谢。

Answer 1

希望你喜欢。 =）

＆＃13;

＆＃13;

function handleValueSelection($el) {
  if($el.is('.bill-control-name')) {
  	return $el.find(':selected').data('itemRate');
  } else {
  	return $el.val();
  }
}

function checkForNaN(value) {
	return (isNaN(value)) ? 0 : value;
}

function updateTotal() {
	var total = 0;
	
  $('.bill-item-total').each(function() {
  	var itemTotal = parseInt($(this).val());
    itemTotal = checkForNaN(itemTotal);
  	total += itemTotal;
  });
  
  $('#bill-total').text(total);
}

$(document).on('change', '.bill-control', function(){
	var $self = $(this);
  
  var selfValue = handleValueSelection($self);
  var pairValue = handleValueSelection($($self.data('pair')));
  var $totalEl = $($self.data('total'));
  var itemTotal = selfValue * pairValue;
  
  itemTotal = checkForNaN(itemTotal);
  
  $totalEl.val(itemTotal);
  
	updateTotal();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered listItem">
    <tbody>
    <tr>
        <th width="20%">Quantity</th>
        <th width="50%">Item</th>
        <th width="20%">Price ($)</th>
        <th width="10%"></th>
    </tr>
    <tr>
        <td>
            <select id="item-1-quantity" class="form-control bill-control BIL_item_quantity" data-pair="#item-1-name" data-total="#item-1-total" name="BIL_Daily_Charge[BIL_item_quantity][]"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
            </select>
        </td>
        <td>
            <select id="item-1-name" class="form-control bill-control bill-control-name BIL_item_id" data-pair="#item-1-quantity" data-total="#item-1-total" name="BIL_Daily_Charge[BIL_item_id][]">
                <option value="">Select an item</option><option value="27" data-item-rate="6.00" data-item-taxes="4">Hot-Dog</option>
            </select>
        </td>
        <td>
            <input id="item-1-total" type="text" class="form-control bill-item-total BIL_item_rate" name="BIL_Daily_Charge[BIL_item_rate][]">
            <input type="hidden" class="form-control BIL_item_taxes" name="BIL_Daily_Charge[BIL_item_taxes][]" value="4">
            <input type="hidden" class="form-control BIL_item_type" name="BIL_Daily_Charge[BIL_item_type][]" value="">
        </td>
        <td>
            <button type="button" class="btn btn-default removeItem"><i class="fa fa-times"></i></button>
        </td>
    </tr>
    <tr>
        <td>
            <select id="item-2-quantity" class="form-control bill-control BIL_item_quantity" data-pair="#item-2-name" data-total="#item-2-total" name="BIL_Daily_Charge[BIL_item_quantity][]"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
            </select>
        </td>
        <td>
            <select id="item-2-name" class="form-control bill-control bill-control-name BIL_item_id" data-pair="#item-2-quantity" data-total="#item-2-total" name="BIL_Daily_Charge[BIL_item_id][]">
                <option value="">Select an item</option><option value="27" data-item-rate="6.00" data-item-taxes="4">Hot-Dog</option>
            </select>
        </td>
        <td>
            <input id="item-2-total" type="text" class="form-control bill-item-total BIL_item_rate" name="BIL_Daily_Charge[BIL_item_rate][]">
            <input type="hidden" class="form-control BIL_item_taxes" name="BIL_Daily_Charge[BIL_item_taxes][]">
            <input type="hidden" class="form-control BIL_item_type" name="BIL_Daily_Charge[BIL_item_type][]">
        </td>
        <td>
            <button type="button" class="btn btn-default removeItem"><i class="fa fa-times"></i></button>
        </td>
    </tr>
    </tbody>
    <h3>Total: <span id="bill-total">0.00</span></h3>
</table>

＆＃13;

＆＃13;

＆＃13;