单击时重置单个值

Question

我有一个包含两个选项的表单。用户可以选择填写选项a和添加选项b。最后计算所有填充输入的总和。我使用显示隐藏功能来显示选项 b 的字段。

如果可能的话，我尝试实现的是当用户选择两个选项时，填充它们并获得结果，如果他们选择更改回选项 a，则删除选项 b 的值并自动更新计算。

$("#option-b").click(function() {
  $(".va3, .va4").show();
});
$("#option-a").click(function() {
  $(".va3, .va4").hide();
});

calculate = function() {
  var optiona1, optiona2, optiona3, optiona4, resultss;
  optiona1 = Number(document.getElementById("a1").value);
  optiona2 = Number(document.getElementById("a2").value);
  optiona3 = Number(document.getElementById("a3").value);
  optiona4 = Number(document.getElementById("a4").value);
  if (a3 == null || a3 == "", a4 == null || a4 == "") {
    resultss = parseInt(optiona1) + parseInt(optiona2);
  } else {
    resultss = parseInt(optiona1) + parseInt(optiona2) + parseInt(optiona3) + parseInt(optiona4);
  }
  document.getElementById('a5').value = resultss;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="option-a" onclick="document.getElementById('a3, a4').value = '0'">option a</button>
<button id="option-b">option b</button><br>
<label>Option a price 1:</label><input id="a1" type="text" /><br>
<label>Option a price 2:</label><input id="a2" type="text" /><br>
<label class="va3" style="display: none">Option b price 1:<input id="a3" type="text" /></label><br>
<label class="va4" style="display: none">Option b price 2:<input id="a4" type="text"  /></label><br>
<label>Result:</label><input id="a5" type="text" onfocus="calculate()" name="total_amt" />

Answer 1

我建议将option-a 和option-b 保留为复选框或单选按钮。

如果两者都可以选择，则为复选框 [OR] 单选按钮，如果一次只能选择 1 个。

并添加一个计算按钮。点击按钮进行计算。

<label for="option-a">Option A</label> 
<input id="option-a" type="checkbox" name="option" value="a" />
<label for="option-b">Option B</label>
<input id="option-b" type="checkbox" name="option" value="b" />

<label class="va1" style="display: none">Option a price 1:<input id="a1" type="number" /></label><br>
<label class="va2" style="display: none">Option a price 2:<input id="a2" type="number"/></label><br>
<label class="va3" style="display: none">Option b price 1:<input id="a3" type="number" /></label><br>
<label class="va4" style="display: none">Option b price 2:<input id="a4" type="number"  /></label><br>

<label>Result:</label><input id="a5" type="text" name="total_amt" />

然后实现一个“更改”侦听器，它执行以下操作。

$('input[name="option"]').on('change', function(e){
 const isChecked = $(e.target).is(":checked");
 const optionValue = $(e.target).val();
 if(optionValue == "a" && isChecked){
  $(".va1, .va2").show();
  $("#a1")[0].value = ""
  $("#a2")[0].value = ""
 }else if(optionValue == "b" && isChecked){
  $(".va3, .va4").show();
  $("#a3")[0].value = ""
  $("#a4")[0].value = ""
 } else if(optionValue == "a" && !isChecked){
  $(".va1, .va2").hide();
  $("#a1")[0].value = "";
  $("#a2")[0].value = ""
 } else if(optionValue == "b" && !isChecked){
  $(".va3, .va4").hide();
  $("#a3")[0].value = ""
  $("#a4")[0].value = ""
 }
});

然后为输入文本字段实现focusout 事件。这将确保在输入数字更改时调用计算。

$('input[type=number]').on('focusout', calculate);

这是工作小提琴链接

http://jsfiddle.net/jmhuwby1/