Question

目标是获得全年的总数量。

用户将数字输入3个不同的文本框（1月，2月，3月），然后总和将显示在禁用的文本框中（Quarter1）。现在我有4个实例，知道我们有4个季度/年。

我可以使用附加到文本框的onchange()函数轻松显示每季度的总和。

现在我无法从4个已禁用的文本框中获取总和，因为我们无法使用onchange()，因为它已被禁用。

我已经搜索过，只有在使用按钮时才可能获得结果。

TLDR ：我试图自动将四个禁用的文本框中的总和显示到另一个文本框，而无需用户单击任何按钮（就像触发onchange事件一样）

我试过这个，其中我试图将第一季度的值显示为总数，而不是正常工作：

$(document).ready(function() {
    $('input[id$=yearlyTotal]').bind("displaytotal", function() {});
    $('#qtr1').change(function() {
        var mos = document.getElementsByClassName("quantityA");
        var mosCount = mos.length;
        var total = 0;

        for (var i = 0; i < mosCount; i++) {
            total = total + parseInt(mos[i].value);
        }
        $('input[id$=yearlyTotal]').val(total).trigger('displaytotal');
    });
});

希望有可能，提前谢谢

编辑：添加了用户界面

显示Q1（4个qtrs的相同）

   <div class="form-group col-md-6">
           <label class="col-sm-1 control-label">Jan:</label>
           <div class="col-sm-2 small">
           <input type="number" min="0" id="col3" class="form-control input-sm monthly" data-q="q1" name="January"  />
           </div>
           <label class="col-sm-1 control-label">Feb:</label>
           <div class="col-sm-2 small">
           <input type="number" min="0" id="col4" class="form-control input-sm monthly" data-q="q1" name="February" />
           </div>
           <label class="col-sm-1 control-label">Mar:</label>
           <div class="col-sm-2 small">
           <input type="number" min="0" id="col5" class="form-control input-sm monthly" data-q="q1" name="March" />
           </div>
           <label class="col-sm-1 control-label">Q1:</label>
           <div class="col-sm-2 small">
           <input type="text" min="0" id="q1" class="form-control input-sm quarter" name="q1"  style="background-color: #b3dcf5;"  disabled />
           </div>
</div>

这是总数量的div

<div class="col-md-6">
       <label class="col-sm-3 control-label" id="">Total Quantity:</label>
       <div class="col-sm-3 small">
       <input type="text" id="final" class="form-control input-sm" name="TotalQuantity" value="0" disabled />
       </div>
</div>

Answer 1

方法1：

基本上，您需要做的是使用jQuery .trigger()函数以编程方式以编程方式触发 change 事件。

由于我不知道您的HTML是如何构建的 - 这就是为什么总是建议提供MCVE示例 - 我做了一个演示示例，我做了不同的事情，如下所示：

jsFiddle 1

var monthly = $('.monthly'), Qrt = $('.quarter'); monthly.on('change, input', function() { var $th = $(this), // depending on the value of the data-q attribute, we pick // all input fields with the same data-q as an array, then //loop through them adding their values up q = $th.attr('data-q'), qArray = $th.parent().children('input[data-q="' + q + '"]'), tempSum = 0; for (var i = 0, ln = qArray.length; i < ln; i++) { tempSum += +$(qArray[i]).val(); } // we pick the corresponding quarter sum field, again depending // on the value of the data-q attritues, and update its value, then // we trigger the change event of this quarter sum field. $('#' + q).val(tempSum).trigger('change'); // here you trigger it }); Qrt.on('change', function() { var qSum = 0; for (var i = 0, ln = Qrt.length; i < ln; i++) { qSum += +$(Qrt[i]).val(); } $('#final').val(qSum); });

.monthly { width: 32%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <h3>Grand Total:</h3><input type="text" id="final" disabled><hr> <h3>1st Q:</h3> <input type="text" class="monthly" data-q="q1"> <input type="text" class="monthly" data-q="q1"> <input type="text" class="monthly" data-q="q1"> <br>Sum:<input id="q1" type="text" class="quarter" disabled> <h3>2nd Q:</h3> <input type="text" class="monthly" data-q="q2"> <input type="text" class="monthly" data-q="q2"> <input type="text" class="monthly" data-q="q2"> <br>Sum:<input id="q2" type="text" class="quarter" disabled> <h3>3rd Q:</h3> <input type="text" class="monthly" data-q="q3"> <input type="text" class="monthly" data-q="q3"> <input type="text" class="monthly" data-q="q3"> <br>Sum:<input id="q3" type="text" class="quarter" disabled> <h3>4th Q:</h3> <input type="text" class="monthly" data-q="q4"> <input type="text" class="monthly q-4th" data-q="q4"> <input type="text" class="monthly q-4th" data-q="q4"> <br>Sum:<input id="q4" type="text" class="quarter" disabled>

方法2：

因为您对任何 .monthly 字段所做的任何更改都会更改季度总和的相应值，因此它也会影响年度总和的值，您不会需要捕获已禁用的季度和字段的 change 事件，只需遍历其值并更新年度字段的值，所有这些都应该在 {{1 on('change') 字段的事件，如下所示：

jsFiddle 2

<强>的jQuery

.monthly

更新

对于OP中更新的HTML，请将var monthly = $('.monthly'), Qrt = $('.quarter'); monthly.on('change, input', function() { var $th = $(this), q = $th.attr('data-q'), qArray = $th.parent().children('input[data-q="' +q+ '"]'), tempSum = 0, qSum = 0; for (var i = 0, ln = qArray.length; i < ln; i++) { tempSum += +$(qArray[i]).val(); } $('#' + q).val(tempSum); // code below for (var i = 0, ln = Qrt.length; i < ln; i++) { qSum += +$(Qrt[i]).val(); } $('#final').val(qSum); });行替换为以下内容：

qArray

注意 parents()带有“s”字母，不像前一个$th.parents('.form-group').find('input[data-q="' + q + '"]')`,向上移动一个级别的DOM，它会“搜索DOM树中这些元素的祖先，并从匹配元素构造一个新的jQuery对象，从直接父级开始排序。“，所以它一直运行直到我们到达matchng父级，这里是parent()

然后我们使用find()而不是.form-group。

jsFiddle 3

Answer 2

请参阅以下代码（查找季度A和B季度的总数）供您参考。请对其他季度使用相同的方法。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
/* FINDING THE QUARTER A AND QUARTER B */
function findingQuaterTotal () {
      /* LOADING QUARTER A AND FINDING ITS TOTAL - STARTS */
      var mosQuarterA = document.getElementsByClassName("quarterA"),
          mosCountQuarterA = mosQuarterA.length,
          totalQuarterA = 0,
          i = 0;

      for (i = 0; i < mosCountQuarterA; i++) {
          totalQuarterA = totalQuarterA + parseInt(mosQuarterA[i].value);
      }
      /* ADDING INTO QUATER A DISABLED TEXTBOX */
      $("#quarterA").val(totalQuarterA);
      /* LOADING QUARTER A AND FINDING ITS TOTAL - ENDS */

      /* LOADING QUARTER B AND FINDING ITS TOTAL - STARTS */
      var mosQuarterB = document.getElementsByClassName("quarterB"),
          mosCountQuarterB = mosQuarterB.length,
          totalQuarterB = 0;

      for (i = 0; i < mosCountQuarterB; i++) {
          totalQuarterB = totalQuarterB + parseInt(mosQuarterB[i].value);
      }
      /* ADDING INTO QUARTER B DISABLED TEXTBOX */
      $("#quarterB").val(totalQuarterB);
      /* LOADING QUARTER B AND FINDING ITS TOTAL - ENDS */

      /* TRIGGERING CHANGE EVENT IN THE DISABLED TEXTBOX WHOSE ID STARTS WITH QUARTER.*/
      $("input[id^='quarter']").trigger("change");
};

/* ABOVE CHANGE TRIGGER WILL CALL BELOW EVENTS - STARTS */
$("input[id^='quarter']").change(function () {                        $("#final").val(parseInt($("#quarterA").val())+parseInt($("#quarterB").val()));
});
/* ABOVE CHANGE TRIGGER WILL CALL BELOW EVENTS - ENDS */

/* IF ANY VALUE CHANGES IN MONTH TEXT BOX, FLLWING FUNCTION WILL BE CALLED - STARTS */
$("input[id^='month']").on("change keyup",function () {
  findingQuaterTotal();
});
findingQuaterTotal();
/* IF ANY VALUE CHANGES IN MONTH TEXT BOX, FLLWING FUNCTION WILL BE CALLED - ENDS */  
});
</script>
</head>
<body>
<h2>Quater A</h2>
Jan - <input type="number" id="month1" value="6" class="quarterA"></br>
Feb - <input type="number" id="month2" value="16" class="quarterA"></br>
March - <input type="number" id="month3" value="25" class="quarterA"></br>
Quater A Total - <input type="number" id="quarterA" value="" disabled></br>

<br/><br/>
<h2>Quater B</h2>
April - <input type="number" id="month4" value="6" class="quarterB"></br>
May - <input type="number" id="month5" value="16" class="quarterB"></br>
June - <input type="number" id="month6" value="25" class="quarterB"></br>
Quater B Total - <input type="number" id="quarterB" value="" disabled></br>


Quarter A and Quarter B total - <input type="number" id="final" value="" disabled>
</body>
</html>

JS / jQuery：在不使用按钮

2 个答案:

方法1：

方法2：

更新