下拉框切换后无法自动更新AccountsQuote数值的技术求助

问题场景 #

选择「Sole trader」、「£ 0k – £ 85k」并选中「Yes」单选按钮时，能正确显示£700。但切换下拉框为「Partnership」后，AccountsQuote容器内的数值本应自动更新为£900，却未变化，必须重新切换「Yes/No」单选按钮才会更新。需要实现所有输入变更后数值自动更新的功能。

问题根源 #

原代码仅在单选按钮变更时执行计算逻辑，当下拉框变化时，只是重新绑定了单选的事件监听，并未立即根据当前所有输入的状态计算并更新报价。

解决方案 #

将计算逻辑抽离为独立函数，让所有输入控件（下拉框、单选按钮）的变更事件都直接触发计算，确保任何输入变化时都能立即更新报价。

修改后的代码 #

JavaScript 部分 #

// 独立计算函数：根据当前表单状态更新报价
function calculateAccountsQuote() {
    const accountsValue = $('input[type=radio][name=accounts]:checked').val();
    
    if (accountsValue === 'Yes') {
        const businesstype = $('#businesstype').val();
        const turnover = $('#turnover').val();
        let quote = '';
        
        if (businesstype === "Sole trader" && turnover === "£ 0k – £ 85k") {
            quote = '£ 700';
        } else if (businesstype === "Sole trader" && turnover === "£ 85k – £ 99k") {
            quote = '£ 850';
        } else if (businesstype === "Partnership" && turnover === "£ 0k – £ 85k") {
            quote = '£ 900';
        }
        $("#AccountsQuote").text(quote);
    } else if (accountsValue === 'No') {
        // 修复原代码中错误的DOM ID，改为正确的AccountsQuote
        $("#AccountsQuote").text('£ 0');
    }
}

// 给所有输入控件绑定变更事件，触发计算
$("#businesstype").change(calculateAccountsQuote);
$("#turnover").change(calculateAccountsQuote);
$('input[type=radio][name=accounts]').change(calculateAccountsQuote);

HTML 部分（无需修改） #

<form action="" method="POST">
  <div id="businesstype-group" class="form-group">
    <label for="businesstype">What type of business are you?</label><br>
    <select id='businesstype' name='businesstype'>
      <option value="" disabled selected>-- Choose --</option>
      <option value="Sole trader">Sole trader</option>
      <option value="Partnership">Partnership</option>
    </select>
  </div>

  <div id="turnover-group" class="form-group">
    <label for="turnover">What is your annual turnover?</label><br>
    <select id='turnover' name="turnover">
      <option value="" disabled selected>-- Choose --</option>
      <option value="£ 0k – £ 85k">£ 0k – £ 85k</option>
      <option value="£ 85k – £ 99k">£ 85k – £ 99k</option>
      <option value="£ 100k – £ 149k">£ 100k – £ 149k</option>
    </select>
  </div>

  <div id="accounts-group" class="form-group">
    <label for="accounts">Do you require Accounts & Tax Returns services?</label><br>
    <input type="radio" id="accountsyes" name="accounts" value="Yes">
    <label for="accountsyes">Yes</label><br>
    <input type="radio" id="accountsno" name="accounts" value="No">
    <label for="accountsno">No</label>
  </div>

  <div id="AccountsQuote"></div>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

关键改进点 #

1. 抽离计算逻辑：将报价计算从事件绑定中独立出来，确保任何输入变化都能直接触发计算，而非仅绑定事件。
2. 修复DOM ID错误：原代码中「No」选项更新的是不存在的id="c"，改为正确的AccountsQuote。
3. 统一事件触发：所有输入控件的变更事件直接指向计算函数，逻辑更清晰，避免中间函数中转的冗余。

内容的提问来源于stack exchange，提问作者Ayushi Patel