jquery 根据下拉选择和更改自动更新值

fdbelqdn  于 2023-03-22  发布在  jQuery
关注(0)|答案(1)|浏览(184)

当我从两个下拉菜单中选择“独家交易者”选项和“£ 0 k- £ 85 k”选项并选择“是”单选按钮时-得到正确答案,即£ 700
但在此之后,我再次上升并更改下拉选项(更改为合作伙伴关系),然后div AccountsQuote中的值需要自动更新,即900英镑
但它不是更新-需要做是-否选择来更新值。
我需要根据我的输入自动更改它,即使更改后

以下是我的代码:

$("#businesstype").change(function() {
  callmethod();
});

$("#turnover").change(function() {
  callmethod();
});

function callmethod() {
  $('input[type=radio][name=accounts]').change(function() {
    if (this.value == 'Yes') {

      var businesstype = $('#businesstype').val();
      var turnover = $('#turnover').val();

      if (businesstype == "Sole trader" && turnover == "£ 0k – £ 85k") {
        document.getElementById("AccountsQuote").innerHTML = '£ 700';
      } else if (businesstype == "Sole trader" && turnover == "£ 85k – £ 99k") {
        document.getElementById("AccountsQuote").innerHTML = '£ 850';
      } else if (businesstype == "Partnership" && turnover == "£ 0k – £ 85k") {
        document.getElementById("AccountsQuote").innerHTML = '£ 900';
      }
    } else if (this.value == 'No') {
      document.getElementById("c").innerHTML = '£ 0';
    }
  });
}
<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>
edqdpe6u

edqdpe6u1#

你需要将更改处理程序移出callmethod函数。这样callmethod函数就可以根据所选的输入进行计算。下面是一个例子。

$("#businesstype").change(function() {
  callmethod();
});

$("#turnover").change(function() {
  callmethod();
});

$('input[type=radio][name=accounts]').change(function() {
    callmethod();
});

function callmethod() {
    var radioVal = $('input[type=radio][name=accounts]:checked').val();
    if (radioVal == 'Yes') {

      var businesstype = $('#businesstype').val();
      var turnover = $('#turnover').val();

      if (businesstype == "Sole trader" && turnover == "£ 0k – £ 85k") {
        document.getElementById("AccountsQuote").innerHTML = '£ 700';
      } else if (businesstype == "Sole trader" && turnover == "£ 85k – £ 99k") {
        document.getElementById("AccountsQuote").innerHTML = '£ 850';
      } else if (businesstype == "Partnership" && turnover == "£ 0k – £ 85k") {
        document.getElementById("AccountsQuote").innerHTML = '£ 900';
      }
    } else if (radioVal == 'No') {
      document.getElementById("AccountsQuote").innerHTML = '£ 0';
    }
}
<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>

相关问题