单击时重置单个值

Question

我有一个表格，有两个选项。 用户可以选择填写选项a，添加选项B。 最后计算所有填充输入的总和。 我使用show hide函数来显示选项B的字段。

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

null

$("#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" />

null

Answer 1

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

如果两个都可以选择，则选择复选框[或]如果一次只能选择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="text" /></label><br>
<label class="va2" style="display: none">Option a price 2:<input id="a2" type="text"/></label><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>
<button onclick="calculate()">
Calculate
</button>
<label>Result:</label><input id="a5" type="text" name="total_amt" />

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

$('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 = ""
 }
});

这是工作的小提琴环节

http://jsfiddle.net/je8v94kw/