如何使用jquery获取输入字段的总和

Question

这是我动态添加输入字段的脚本，在这部分中，字段的最大值为 10。$(document).ready(function() {  var max_fields = 10;  var wrapper = $(".container1");  var add_button = $(".add_form_field");  var x = 1;  $(add_button).click(function(e) {    e.preventDefault();    if (x < max_fields) {      x++;      var form_colis = '<div><input type="text" placeholder="Poids" name="poids[]"/> <input type="text" placeholder="Longueur" name="longueurs[]"/> <input type="text" placeholder="Largeur" name="largeurs[]"/> <input type="text" placeholder="Hauteur" name="hauteurs[]"/><a href="#" class="delete">Delete</a></div>';      //$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box      $(wrapper).append(form_colis); //add input box    } else {      alert('You Reached the limits')    }  });  $(wrapper).on("click", ".delete", function(e) {    e.preventDefault();    $(this).parent('div').remove();    x--;  })});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container1">  <button class="add_form_field">Add New Field &nbsp;               <span style="font-size:16px; font-weight:bold;">+ </span>            </button>  <div>    <input type="text" placeholder="Poids" name="poids[]">    <input type="text" placeholder="Longueur" name="longueurs[]">    <input type="text" placeholder="Largeur" name="largeurs[]">    <input type="text" placeholder="Hauteur" name="hauteurs[]">  </div></div>现在，我想在先前字段名称总和的函数中添加字段。例如。对于名为 poids[] 的字段，如果总和大于 100，则用户无法添加 fieldset，否则可以。我希望你明白我的意思。先感谢您

Answer 1

这是一个可以计算的版本。我也缩短了代码 - 请注意 CSS 更改以及向 item div 添加的类

我假设您只想测试 poids > 100 ？

$(function() {

  var max_fields = 10;

  var $wrapper = $(".container1");

  var add_button = $(".add_form_field");

  $(add_button).click(function(e) {

    e.preventDefault();

    const vals = $("> .item input[name^=poids]",$wrapper).map(function() { return +this.value }).get()

    const val = vals.length === 0 ? 0 : vals.reduce((a, b) => a + b);

    if ($("> .item",$wrapper).length < max_fields && val < 100) {

      const $form_colis = $(".item").first().clone();

      $form_colis.find("input").val("");

      $wrapper.append($form_colis); //add input box

    } else {

      alert('You Reached the limits')

    }

  });

  $wrapper.on("click", ".delete", function(e) {

    e.preventDefault();

    $(this).parent('div').remove();

  })

});

.container1 .item:first-of-type .delete {

  display: none;

}

.delete { text-decoration: none; color: red; }

.add_form_field { white-space: nowrap; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="add_form_field">Add New Field ✚</button>

<div class="container1">

  <div class="item">

    <input type="text" placeholder="Poids" name="poids[]">

    <input type="text" placeholder="Longueur" name="longueurs[]">

    <input type="text" placeholder="Largeur" name="largeurs[]">

    <input type="text" placeholder="Hauteur" name="hauteurs[]">

    <a href="#" class="delete">Delete</a>

  </div>

</div>

Answer 2

如果我正确理解了你的问题，那么请检查我修改过的这个解决方案。如果所有字段的总和恰好小于100，则添加新字段，否则不添加。有必要吗？

$(document).ready(function() {  

  

  var max_fields = 10;

  var wrapper = $(".container1");

  var add_button = $(".add_form_field");

  var x = 1;

  $(add_button).click(function(e) {

    e.preventDefault();

    

  $('.inputs:last-of-type').each(function(){

    var sum_inputs = 0;

    $(this).find('input').each(function(){

      sum_inputs += parseInt($(this).val());

    });

          

    if (x < max_fields && sum_inputs < '100') {

      x++;

      var form_colis = '<div class="inputs"><input type="text" placeholder="Poids" name="poids[]"/> <input type="text" placeholder="Longueur" name="longueurs[]"/> <input type="text" placeholder="Largeur" name="largeurs[]"/> <input type="text" placeholder="Hauteur" name="hauteurs[]"/><a href="#" class="delete">Delete</a></div>';

      //$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box

      $(wrapper).append(form_colis); //add input box

    } else {

      alert('You Reached the limits')

    }

    });

  });

  $(wrapper).on("click", ".delete", function(e) {

    e.preventDefault();

    $(this).parent('div').remove();

    x--;

  }) 

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container1">

  <button class="add_form_field">Add New Field &nbsp; 

              <span style="font-size:16px; font-weight:bold;">+ </span>

            </button>

  <div class="inputs">

    <input type="text" placeholder="Poids" name="poids[]">

    <input type="text" placeholder="Longueur" name="longueurs[]">

    <input type="text" placeholder="Largeur" name="largeurs[]">

    <input type="text" placeholder="Hauteur" name="hauteurs[]">

  </div>

</div>