Question

我是bootstrap编码的新手。我有一个简单的问题，但我找不到答案。

这就是我需要的：我有一个单项的重量，我需要计算总重量的单位数。

有人可以帮帮我吗？

<div class="col-xs-4 control-group form-group">
    <div class="controls">
        <label>Unit Weight:</label>
        <input type="text" class="form-control" id="uweight" required data-validation-required-message="Please enter your name.">
        <p class="help-block"></p>
    </div>
</div>
<div class="col-xs-4 control-group form-group">
    <div class="controls">
        <label>Units:</label>
        <input type="text" class="form-control" id="units" required data-validation-required-message="Please enter your name.">
        <p class="help-block"></p>
    </div>
</div>
<div class="col-xs-4 control-group form-group">
    <div class="controls">
        <label>Total:</label>
        <input type="text" class="form-control" id="total" >
        <p class="help-block"></p>
    </div>
</div>

Answer 1

您可以使用jQuery通过ID获取输入值，然后执行计算。您只需为每个输入ID和计算分配一个变量，然后输出到number。

*我已将您的输入类型从text更改为$(document).ready(function() { $(document).on('change', '.form-control', function() { var yourWeight, yourUnits, yourTotal; yourWeight = $(' #uweight ').val(); yourUnits = $(' #units ').val(); yourTotal = (parseFloat(yourWeight)) * (parseFloat(yourUnits)); $(' #total ').val(yourTotal.toFixed(2)); }); });。

＆＃13;

body {
  padding-top: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form name="calcForm">
    <div class="row">
      <div class="col-xs-4 control-group form-group">
        <div class="controls">
          <label>Unit Weight:</label>
          <input type="number" class="form-control" id="uweight" required data-validation-required-message="Please enter your name.">
          <p class="help-block"></p>
        </div>
      </div>
      <div class="col-xs-4 control-group form-group">
        <div class="controls">
          <label>Units:</label>
          <input type="number" class="form-control" id="units" required data-validation-required-message="Please enter your name.">
          <p class="help-block"></p>
        </div>
      </div>
      <div class="col-xs-4 control-group form-group">
        <div class="controls">
          <label>Total:</label>
          <input type="number" class="form-control" id="total" disabled/>
          <p class="help-block"></p>
        </div>
      </div>
    </div>

  </form>
</div>

＆＃13;

initialize

＆＃13;

Answer 2

将calculate类添加到每个输入稍后与jQuery keyup function绑定，当用户释放键时，计算可以动态完成，总和将输出到#total

$(document).ready(function () {

    //Calculate both inputs value on the fly
    $('.calculate').keyup(function () {
        var Tot = parseFloat($('#units').val()) + parseFloat($('#uweight').val());
        $('#total').val(Tot);
    });

    //Clear both inputs first time when user focus on each inputs and clear value 00
    $('.calculate').focus(function (event) {
        $(this).val("").unbind(event);
    });

    //Remove this it's just for example purpose
    $('.calculate').keypress(function (e) {
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            $("#errmsg").html("Digits Only").show().fadeOut("slow");
            return false;
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<div class="col-xs-4 control-group form-group">
    <div class="controls">
        <label>Unit Weight:</label>
        <input type="text" class="form-control calculate" id="uweight" required value="00">
        <p class="help-block"></p>
    </div>
</div>
<div class="col-xs-4 control-group form-group">
    <div class="controls">
        <label>Units:</label>
        <input type="text" class="form-control calculate" id="units" required value="00">
        <p class="help-block"></p>
    </div>
</div>
<div class="col-xs-4 control-group form-group">
    <div class="controls">
        <label>Total:</label>
        <input type="text" class="form-control" id="total" readonly>
        <p class="help-block"></p>
    </div>
</div>
<div class="col-xs-12 control-group form-group" id="errmsg"></div>

Fiddle

计算内联形式的总值

2 个答案: