Значения, которые не обновляются при нажатии переключателя

Question

У меня есть некоторые поля, привязанные к уравнению, и по мере обновления полей отображаемый контент в элементе списка. Однако обновление уравнения происходит только в том случае, если пользователь возвращается в поле, а затем содержимое обновляется при размытии. Есть ли способ сделать это обновление контента, как только проверяется радиополе?

HTML:

<ul class="fltrt"> 
    <li class="brand brand-blue perMonth">$461/mo</li> 
    <li>Estimated Payment<span class="glyphicon glyphicon-cloud"></span></li> 
</ul> 

<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.0436" 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"> 
     <input type="radio" id="edit-status-1" name="status" value="48" apr="0.0474" months="48" class="form-radio radioCursor"/> 
     <label class="option unchecked" for="edit-status-1">48 mos</label> 
    </div> 
    <div class="form-item form-type-radio form-item-status"> 
     <input type="radio" id="edit-status-2" name="status" value="60" apr="0.0494" months="60" class="form-radio radioCursor"/> 
     <label class="option unchecked" for="edit-status-2">60 mos</label> 
    </div> 
    <div class="form-item form-type-radio form-item-status"> 
     <input type="radio" id="edit-status-3" name="status" value="72" apr="0.0530" months="72" checked="checked" class="form-radio radioCursor"/> 
     <label class="option checked" for="edit-status-3">72 mos</label> 
    </div> 

JQuery:

$(document).ready(function() { 
    $(function() { 
     $("body").on("blur", "#vehiclePrice,#estimatedTaxesAndFees,#downPayment,#manufacturerRebate,#tradeInValue,#amtOwedOnTrade,#extendedWarranty,#gapInsurance,#serviceContract", function() { 
      updateTotal(); 
     }); 

     var updateTotal = function() { 
      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(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);    

      $('.perMonth').text('$'+perMonth.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')); 
     }; 

     var output_total = $('#total'); 
    }); 
}); 

JQ для радио-кнопки:

$(document).ready(function() { 
    $('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') 
      $(".output2").html("4.36%" + "<span class=\"expandedTermsText\"> APR<\/span>"); 
     else if ($("input[name='status']:checked").val() == '48') 
      $(".output2").html("4.74%" + "<span class=\"expandedTermsText\"> APR<\/span>"); 
     else if ($("input[name='status']:checked").val() == '60') 
      $(".output2").html("4.94%" + "<span class=\"expandedTermsText\"> APR<\/span>"); 
     else if ($("input[name='status']:checked").val() == '72') 
      $(".output2").html("5.30%" + "<span class=\"expandedTermsText\"> APR<\/span>"); 
    }); 
}); 

скрипку показывает, что все работает, как должно (только убедитесь, поставьте не менее 1000 в поле цены автомобиля), и он будет обновляться, если вы выберете другой месяц. Но только если вы выберете другую радиокнопку, а затем сфокусируйтесь на входе, а затем на фокусе. Мне нужно, чтобы он менялся при нажатии на радио. Working Fiddle

Answer 1

Я сделал JSFiddle для вас, который очищает некоторые из javascript. Вы можете видеть это here. Большая вещь вызывает ваш скрипт updateTotal() на кликах APR, передавая значение APR и сохраняя это.

updateTotal("4.36%"); 

И в этой функции ...

updateTotal = function (apr) { 
    currentAPR = apr; 
    $(".output2").html(apr + "<span class=\"expandedTermsText\"> APR<\/span>"); 

И в вашем случае размытия, так как мы сохранить последний APR в переменной currentAPR, мы просто отправить его в на обновление:

updateTotal(currentAPR); 

Answer 2

Вы пробовали использовать .change() или .click()?

Answer 3

попробуйте этот код!

$("input[name='status']").change(function() { 
     updateTotal(); 
    }); 

Answer 4

Две вещи, которые должны помочь вам здесь:

1. Вам не нужно связывать какие-либо действия для <label> тегов. Поскольку вы связали их со входами, используя атрибут for, щелчок по метке приведет к проверке опции, как если бы вы сами выбрали эту опцию.
2. Вы хотите связать действие с событием change, а не с событием click. Хотя в группе радиостанций есть несколько вариантов, радиогруппа в целом представляет собой один вход. Вы хотите принять действие только тогда, когда значение этого входа изменится, поэтому используйте это событие.

Эти две вещи займут у вас долгий путь в решении любых вопросов, которые вы можете видеть, потому что действуешь на click случае могут получить вам неожиданные результаты на change ведомого элемента формы.

UPDATE:

Просто заметил что-то другое. , , в вашем начальном $("body").on("blur", . . ., вам, вероятно, следует пойти с событием change. , , снова это поможет, потому что оно будет обновляться только тогда, когда значение ввода изменяется и не будет срабатывать каждый раз, когда кто-то будет входить в поле.

И вы никогда не назовете свою функцию updateTotal в любой точке своей функции, которая срабатывает при изменении выбора радио. Если вы добавите его в конец этой логики, оно должно инициировать обновление, которое вы ищете.