Question

我正在计算更多字段，我想在没有任何jQuery事件的情况下获得#price +＃price2自动总和。我一直在寻找各种教程，但我只是通过点击获得了总和。

我希望她没有点击，她怎么能这样做？

＆＃13;

function calcscore() {
  score = 0;
  $(".calc:checked,#TextBox4").each(function() {
    score += Number($(this).val());
  });

  $("#sum").val(score)
  $("#price").text(score.toFixed(2));
}

function add() {
  var sum = 0;
  $(".test").each(function() {
    sum += +this.value;
  });
  return sum; // an add function shouldn't really "alert"
}


$(document).on("change", ".test", function() {
  var sum = 0;
  $(".test").each(function() {
    sum += +$(this).val();
  });
  $("#price3").val(sum);
});


$(document).ready(function() {

  $(".calc").change(function() {
    calcscore();
  });

  $('#add').click(function() {
    $("#price3").text(add().toFixed(2));
  });

  $("#TextBox1").datepicker({
    minDate: 0,
    maxDate: '+1Y+6M',
    altField: "#arrivo",
    altFormat: "DD, d MM, yy",
    onSelect: function(dateStr) {
      var min = $(this).datepicker('getDate'); // Get selected date
      $("#TextBox2").datepicker('option', 'minDate', min || '0'); // Set other min, default to today
    }
  });

  $("#TextBox2").datepicker({
    minDate: '0',
    maxDate: '+1Y+6M',
    altField: "#partenza",
    altFormat: "DD, d MM, yy",
    onSelect: function(dateStr) {
      var max = $(this).datepicker('getDate'); // Get selected date
      $('#datepicker').datepicker('option', 'maxDate', max || '+1Y+6M'); // Set other max, default to + 18 months
      var start = $("#TextBox1").datepicker("getDate");
      var end = $("#TextBox2").datepicker("getDate");
      var timeDiff = Math.abs((end - start));
      var days = Math.ceil(timeDiff / (1000 * 3600 * 24));

      $("#TextBox3").val(days);

      if (days == 1) {
        parseInt($("#TextBox4").val('10'), 10);
        parseInt($("#price2").text('10'), 10);

      } else if (days == 0) {
        parseInt($("#TextBox4").val('10'), 10);
        parseInt($("#price2").text('10'), 10);
        $("#TextBox3").val('1');
      } else if (days == 2) {
        parseInt($("#TextBox4").val('12'), 10);
        parseInt($("#price2").text('12'), 10);
      } else if (days == 3) {
        parseInt($("#TextBox4").val('14'), 10);
        parseInt($("#price2").text('14'), 10);
      } else if (days == 4) {
        parseInt($("#TextBox4").val('16'), 10);
        parseInt($("#price2").text('16'), 10);
      } else if (days >= 5) {
        var y = (days) * 4;
        parseInt($("#TextBox4").val(y), 10);
        parseInt($("#price2").text(y), 10);
      }
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<form>
  <div id="tipo-veicolo">
    <input class="calc" type="radio" name="type" value="5"> Macchina
    <input class="calc" type="radio" name="type" value="2"> Scooter
    <input class="calc" type="radio" name="type" value="10"> Camion
  </div>
  <div class="variant">
    <label>Cambio olio</label>
    <input class="calc" type="checkbox" name="check1" id="check1" value="10" />
    <label>Cambio gomme</label>
    <input class="calc" type="checkbox" name="check1" id="check2" value="2" />
    <label>Car valet</label>
    <input class="calc" type="checkbox" name="check1" id="check3" value="12" />
  </div>
  <div id="selezione-data">
    <div class="check-in">
      <label>Check-In</label>
      <input type="text" id="TextBox1" />
    </div>
    <div class="check-out">
      <label>Check-Out</label>
      <input type="text" id="TextBox2" />
    </div>
    <div class="numero-giorni">
      <label>Numero Giorni</label>
      <input type="text" id="TextBox3" value="0" />
      <label>Arrivo</label>
      <input type="text" id="arrivo" size="30">
      <label>Partenza</label>
      <input type="text" id="partenza" size="30">
    </div>
  </div>
  <div class="totale">
    <input class="test num1" name="totale" id="TextBox4" value="0" />
    <input class="test num2" type="text" name="sum" id="sum" value="0"> Sum: <input type="text" class="sum" readonly="readonly">
  </div>

</form>

<p>Total: PHP <span id="price">0</span></p>

<p>Total: PHP <span id="price2">0</span></p>

<p>Total: PHP <span id="price3">0</span></p>

<input id="add" type="button" value="add" />

＆＃13;

谢谢你，美好的一天

Answer 1

我不确定我是否理解正确，但如果不使用任何活动，你就无法做到。

您可以在jQuery中使用例如输入事件来实现自动聚合。

以下是此示例：

$('.num1, .num2').on('input', function () {
    $('.sum').val(parseInt($('.num1').val()) + parseInt($('.num2').val()));
});

Here is jfiddle.

Answer 2

尝试此操作以实现目标，将其置于document.ready事件

的末尾

$(document).ready(function() {
..
..
..
   $("input").change(function() { // place it at the bottom of other events, this will listen for all inputs
     $("#price3").text(add().toFixed(2)); // after input changes it will calculate
   });
});

demo

希望有所帮助，

使用jQuery自动输入和

2 个答案: