Jquery加法减法通过复选框不工作

Question

我正在接受输入值。并通过复选框修改它。添加工作和减法，如果我显示响应在跨度工作完美，但如果我在同一输入框中显示响应不工作

这是一个代码段：

＆＃13;

＆＃13;

$(document).ready(function() {

  function displayVals() {
    calcUsage();
    var singleValues = $("#more").val();
    $("#span").html("<b>more addons:</b> " +
      singleValues + ' QR');
  }
  var $cbs = $('input[name="ch1"]');

  function calcUsage() {
    var total = $("#more").val();
    $cbs.each(function() {
      if (this.checked)
        total = parseInt(total) + parseInt(this.value);
    });

    var amt = $("#total_amt").val();
    var grand_total = parseInt(total) + parseInt(amt);
    $("#usertotal").text(grand_total);

  }

  $("select").change(displayVals);
  displayVals();
  //For  checkboxes

  $cbs.click(calcUsage);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <h1>Add-ons</h1>
  <input type="checkbox" name="ch1" value="10" id="qr1" />Add-on Number 1 - 10 QR
  <br />
  <input type="checkbox" name="ch1" value="20" id="qr1" />Add-on Number 2 - 20 QR
  <br />
  <input type="checkbox" name="ch1" value="40" id="qr1" />Add-on Number 3 - 40 QR
  <br />
  <input type="checkbox" name="ch1" value="60" id="qr1" />Add-on Number 4 - 60 QR
  <br />
</div>

<div>I want more add-ons
  <select id="more" name="more" style="display:none">
    <option value="0">0</option>
    <option value="30">1</option>
    <option value="50">2</option>
    <option value="100">3</option>
  </select>
  <span id="span"></span>
  User total usage: <span id="usertotal"> </span>

  <br>
  <input type="text" name="total" id="total_amt" value="400" />
  <div id="ad">
    <div id="ad"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您没有指定输入：

$("#usertotal").text(grand_total);
$("#total_amt").val(grand_total);

<强>段

＆＃13;

＆＃13;

$(document).ready(function() {
  var initVal = $("#more").val();
  function displayVals() {
    calcUsage();
    var singleValues = parseInt(initVal);
    $("#span").html("<b>more addons:</b> " +
      singleValues + ' QR');
  }
  var $cbs = $('input[name="ch1"]');

  function calcUsage() {
    var total = 400;
    $cbs.each(function() {
      if (this.checked)
        total = parseInt(total) + parseInt(this.value);
    });

    var amt = initVal;
    var grand_total = parseInt(total) + parseInt(amt);
    $("#usertotal").text(grand_total);
    $("#total_amt").val(grand_total);

  }

  $("select").change(displayVals);
  displayVals();
  //For  checkboxes

  $cbs.click(calcUsage);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <h1>Add-ons</h1>
  <input type="checkbox" name="ch1" value="10" id="qr1" />Add-on Number 1 - 10 QR
  <br />
  <input type="checkbox" name="ch1" value="20" id="qr1" />Add-on Number 2 - 20 QR
  <br />
  <input type="checkbox" name="ch1" value="40" id="qr1" />Add-on Number 3 - 40 QR
  <br />
  <input type="checkbox" name="ch1" value="60" id="qr1" />Add-on Number 4 - 60 QR
  <br />
</div>

<div>I want more add-ons
  <select id="more" name="more" style="display:none">
    <option value="0">0</option>
    <option value="30">1</option>
    <option value="50">2</option>
    <option value="100">3</option>
  </select>
  <span id="span"></span>
  User total usage: <span id="usertotal"> </span>

  <br>
  <input type="text" name="total" id="total_amt" value="400" />
  <div id="ad">
    <div id="ad"></div>

＆＃13;

＆＃13;

＆＃13;