javascript - 使用复选框来决定要对哪些输入框值求和

Question

我正在尝试编写一些 Javascript/jQuery 来对在多个文本框中输入的值求和。

每个输入框都有一个与之关联的复选框，根据该复选框，该值将添加到总计中。例如，如果用户选择 Activity fees 和 Transport fees，它们应该相加，如果他选择 Misc fees，它们也会相加，并且如果他随后取消选中 Misc fees，则应再次减去该值。

function optionalfee() {
    var total = 0;
    var fee = document.getElementsById('optional1');
    for (var i = 0; i < fee.length; ++i) {
      if (optional1.checked == true)
        document.getElementById('optional').value = fee;
      total += parseFloat(fee.value);
    }
  } else {
    total -= parseFloat(fee.value);
  }
  //alert(total);
document.getElementById('toptional').value = total;
}

Include Activity fees <input type="checkbox" id="optional1" /><input type="number" id="optional" name="afees"><br><br>
Include Transport fees <input type="checkbox" id="optional1" /><input type="number" id="optional" name="tfees"><br><br>
Include Misc fees <input type="checkbox" id="optional1" /><input type="number" id="optional" name="mfees"><br><br>
Include Olympiad fees <input type="checkbox" id="optional1" /><input type="number" id="optional" name="ofees"><br><br>
Optional fees total <input type="number" id="toptional" name="toptional" class="toptional" readonly>

Answer 1

1. 使所有 ID 都独一无二
2. 改用类
3. 添加了缺失的括号
4. isNaN 和空的测试值
5. 当数字改变时也更新

请注意，我正在为 id 使用数据属性

纯 JS:

function optionalfee() {
  var total = 0;
  // get the checked boxes only
  document.querySelectorAll('.optional:checked').forEach(check => {
    // find the ID of the input to use
    var input = document.getElementById(check.getAttribute("data-id"));
    var val = input.value;
    // handle poor or no input - is in principle already handled by the type="number"
    val = (isNaN(val) || "" === val.trim()) ? 0 : parseFloat(val);
    total += val;
  })
  document.getElementById('toptional').value = total;
}
window.addEventListener("DOMContentLoaded", () => {
  const checks = document.querySelectorAll(".optional"),
    fees = document.querySelectorAll(".fee");
  checks.forEach((check, i) => {
    checks[i].onclick = optionalfee;
    fees[i].oninput = optionalfee;
  })
})

Include Activity fees

<input type="checkbox" class="optional" data-id="optional1" />
<input type="number" class="fee" id="optional1" name="afees">
<br>
<br>Include Transport fees
<input type="checkbox" class="optional" data-id="optional2" />
<input type="number" class="fee" id="optional2" name="tfees">
<br>
<br>Include Misc fees
<input type="checkbox" class="optional" data-id="optional3" />
<input type="number" class="fee" id="optional3" name="mfees">
<br>
<br>Include Olympiad fees
<input type="checkbox" class="optional" data-id="optional4" />
<input type="number" class="fee" id="optional4" name="ofees">
<br>
<br>Optional fees total
<input type="number" id="toptional" name="toptional" class="toptional" readonly>

jQuery:

function optionalfee() {
  var total = 0;
  $('.optional:checked').each(function() {
    var val = $("#"+$(this).data("id")).val();
    val = isNaN(val) || "" === $.trim(val) ? 0 : parseFloat(val);
    total += val;
  });
  $('#toptional').val(total);

}

$(function() {
  $(".optional").each(function() {
    $(this).on("click", optionalfee);
    // if not next to each other, 
    // use  $("#"+$(this).data("id")).on("input", optionalfee);
    $(this).next().on("input", optionalfee);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Include Activity fees
<input type="checkbox" class="optional" data-id="optional1" />
<input type="number" class="fee" id="optional1" name="afees">
<br>
<br>Include Transport fees
<input type="checkbox" class="optional" data-id="optional2" />
<input type="number" class="fee" id="optional2" name="tfees">
<br>
<br>Include Misc fees
<input type="checkbox" class="optional" data-id="optional3" />
<input type="number" class="fee" id="optional3" name="mfees">
<br>
<br>Include Olympiad fees
<input type="checkbox" class="optional" data-id="optional4" />
<input type="number" class="fee" id="optional4" name="ofees">
<br>
<br>Optional fees total
<input type="number" id="toptional" name="toptional" class="toptional" readonly>