javascript - 使用复选框确定要汇总的输入框值

我正在尝试编写一些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>

最佳答案

使所有ID唯一
改用类
添加了缺少的括号
isNaN和空的测试值
号码更改时也会更新


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

普通JS：

function optionalfee() {
  var total = 0;
  // get the checked boxes only
  var checks = document.querySelectorAll('.optional:checked');
  for (var i = 0; i < checks.length; ++i) {
    var check = checks[i];
    // 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.onload = function() {
  var checks = document.querySelectorAll(".optional"),
    fees = document.querySelectorAll(".fee");
  for (var i = 0; i < checks.length; 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>