javascript - 我想使用 amount_t 属性添加这些金额。并显示在文本框中

Question

我有一定金额的复选框列表。

<input type="checkbox" name="subject1" value="course_id" amount_t="amount"  class="amount" />
<input type="checkbox" name="subject2" value="course_id" amount_t="amount"  class="amount" />
<input type="checkbox" name="subject3" value="course_id" amount_t="amount"  class="amount" />
<input type="checkbox" name="subject4" value="course_id" amount_t="amount"  class="amount" />

$(document).ready(function() {
  $(".amount").change(function() {
    if (($(this).is(':checked'))) {
      var res;
      var val1 = parseInt($(this).attr("amount_t"));
      var val2 = $("#amount").attr("value");
      console.log('value1', val1);
      console.log('value2', val2);
      res = val2.slice(-4);
      res = parseInt(res);
      var val3 = 'Amount : $ ';
      var val4 = val1 + res;
      var val = val3 + val4;
      $("#amount").val(val);
    } else {
      var res;
      var val1 = parseInt($(this).attr("amount_t"));
      var val2 = $("#amount").attr("value");
      console.log('value1', val1);
      console.log('value2', val2);
      res = val2.slice(-4);
      res = parseInt(res);
      var val3 = 'Amount : $ ';
      var val4 = res - val1;
      var val = val3 + val4;
      $("#amount").val(val);
    }
  });

});

<input type="text" name="amount" id="amount" class="form-control frm" value="Amount : $ 0000" disabled>

金额不应由用户更改。

第一次选择工作正常，之后它显示为初始状态。你能帮我一下吗？

Answer 1

如果我正确理解您的代码，您希望显示与每个选中的复选框对应的金额总和。除非您有充分的理由不这样做，否则您应该将复选框值保存在 value 属性中。

$(document).ready(function() {
  var checkboxes = $(".amount");
  var amountSpan = $('#amount');
  checkboxes.change(function() {
    var sum = 0;
    checkboxes.each(function(index, checkbox) {
      if (checkbox.checked)
        sum += parseInt(checkbox.value);
    });

    amountSpan.text(sum);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$10 <input type="checkbox" name="subject1" value="10" class="amount" />
$20 <input type="checkbox" name="subject2" value="20" class="amount" />
$30 <input type="checkbox" name="subject3" value="30" class="amount" />
$40 <input type="checkbox" name="subject4" value="40" class="amount" />

<div>
  <span>Amount $:</span> <span id="amount">0</span>
</div>