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


I would like to add these amounts using amount_t attribute. and display in a textbox

我有一个特定数量的复选框列表。

<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>

用户不能更改金额。

对于第一次选择它是正常工作的,之后它显示为初始。

如果我正确理解了您的代码,您希望显示每个选中的复选框对应的金额的总和。除非有很好的理由不这样做,否则应该保留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>