我有一个表格,显示用户根据他们选择的广播以及他们在字段中输入的数字输入的各种输入金额。我正在使用表数据单元来显示输出,并且每个都在用户更改实际输入字段中的数据时进行更新。但是,在检查单选按钮时,所有单元格都在更新,我只希望在用户检查不同的框时更新一次td单元格。当前点击任何无线电时,所有小区都在更新。这是肮脏的:
$(document).ready(function () {
// var updateTotal, currentAPR;
var updateTotal, currentAPR = '7.95%';
$("body").on("blur", "#vehiclePrice,#estimatedTaxesAndFees,#downPayment,#manufacturerRebate,#tradeInValue,#amtOwedOnTrade,#extendedWarranty,#gapInsurance,#serviceContract", function () {
updateTotal(currentAPR);
});
updateTotal = function (apr) {
currentAPR = apr;
$(".output2").html(apr);
$(".output3").html(apr + "<span class=\"expandedTermsText\"> APR<\/span>");
var input1 = parseInt($('#vehiclePrice').val()) || 0;
var input2 = parseInt($('#estimatedTaxesAndFees').val()) || 0;
var input3 = parseInt($('#downPayment').val()) || 0;
var input4 = parseInt($('#manufacturerRebate').val()) || 0;
var input5 = parseInt($('#tradeInValue').val()) || 0;
var input6 = parseInt($('#amtOwedOnTrade').val()) || 0;
var input7 = parseInt($('#extendedWarranty').val()) || 0;
var input8 = parseInt($('#gapInsurance').val()) || 0;
var input9 = parseInt($('#serviceContract').val()) || 0;
var sum = input1 + input2 - input3 - input4 - input5 + input6 + input7 + input8 + input9;
$('.total').text('$' + sum.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
var principle = parseInt($('#vehiclePrice').val()) || 0;
var apr = $("input[name='status']:checked").attr("apr");
var months = $("input[name='status']:checked").attr("months");
var perMonth = sum * (apr / 12) / (1 - Math.pow((1 + (apr / 12)), -months)).toFixed(2);
var perMonth48 = sum * (0.0595 / 12) / (1 - Math.pow((1 + (0.0595 / 12)), -months)).toFixed(2);
var perMonth60 = sum * (0.0695 / 12) / (1 - Math.pow((1 + (0.0695 / 12)), -months)).toFixed(2);
var perMonth72 = sum * (0.0795 / 12) / (1 - Math.pow((1 + (0.0795 / 12)), -months)).toFixed(2);
$('.perMonth').text('$' + perMonth.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
$('.perMonth2').text('$' + perMonth.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
$('.perMonth48').text('$' + perMonth48.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
$('.perMonth60').text('$' + perMonth60.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
$('.perMonth72').text('$' + perMonth72.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
};
$('label.option').click(function () {
$('.form-item input[type=radio]').attr('checked', null);
$('label.option').removeClass("checked").addClass("unchecked");
$(this).prev().attr('checked', "checked");
$(this).addClass("checked").removeClass("unchecked");
});
$("input[name='status']").click(function () {
console.log("changed");
if ($("input[name='status']:checked").val() == '36') {
updateTotal("4.95%");
//$(".output2").html("4.36%" + "<span class=\"expandedTermsText\"> APR<\/span>");
} else if ($("input[name='status']:checked").val() == '48') {
updateTotal("5.95%");
//$(".output2").html("4.74%" + "<span class=\"expandedTermsText\"> APR<\/span>");
} else if ($("input[name='status']:checked").val() == '60') {
updateTotal("6.95%");
//$(".output2").html("4.94%" + "<span class=\"expandedTermsText\"> APR<\/span>");
} else if ($("input[name='status']:checked").val() == '72') {
updateTotal("7.95%");
//$(".output2").html("5.30%" + "<span class=\"expandedTermsText\"> APR<\/span>");
} else if ($("input[name='status']:checked").val() == '') {
updateTotal("");
//$(".output2").html("5.30%" + "<span class=\"expandedTermsText\"> APR<\/span>");
}
});
});
这是HTML(我没有为这个表单显示36个mos,所以不确定这是否也会影响它:
<div id="edit-status" class="form-radios">
<!-- <div class="form-item form-type-radio form-item-status">
<input type="radio" id="edit-status-0" name="status" value="36" apr="0.0495" months="36" class="form-radio radioCursor"/>
<label class="option unchecked" for="edit-status-0">36 mos</label>
</div> -->
<div class="form-item form-type-radio form-item-status">
<table class="gridStyleTable">
<tr>
<td> <h2 class="termsGreenCustom perMonth48">$671<span class="expandedTermsText"> /mo</span></h2>
<input type="radio" id="edit-status-1" name="status" value="48" apr="0.0595" months="48" class="form-radio radioCursor"/>
<label class="option unchecked" for="edit-status-1">48 mos</label></td>
</tr>
<tr>
<td> <h2 class="termsGreenCustom">5.95%<span class="expandedTermsText"> APR</span></h2> </td>
</tr>
<tr>
<td> 48 mos</td>
</tr>
</table>
</div>
<div class="form-item form-type-radio form-item-status label_main_selected'">
<table class="gridStyleTable label_main_selected'">
<tr>
<td> <h2 class="termsGreenCustom perMonth60">$568<span class="expandedTermsText"> /mo</span></h2>
<input type="radio" id="edit-status-2" name="status" value="60" apr="0.0695" months="60" class="form-radio radioCursor"/>
<label class="option unchecked" for="edit-status-2">60 mos</label></td>
</tr>
<tr>
<td><h2 class="termsGreenCustom">6.95%<span class="expandedTermsText"> APR</span></h2> </td>
</tr>
<tr>
<td> 60 mos </td>
</tr>
</table>
</div>
<div class="form-item form-type-radio form-item-status">
<table class="gridStyleTable">
<tr>
<td> <h2 class="termsGreenCustom perMonth72">$469<span class="expandedTermsText"> /mo</span></h2>
<input type="radio" id="edit-status-3" name="status" value="72" apr="0.0795" months="72" checked="checked" class="form-radio radioCursor"/>
<label class="option checked" for="edit-status-3">72 mos</label></td>
</tr>
<tr>
<td> <h2 class="termsGreenCustom">7.95%<span class="expandedTermsText"> APR</span></h2></td>
</tr>
<tr>
<td> 72 mos </td>
</tr>
</table>
</div>