如何使用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() {&nbsp; var max_fields = 10;&nbsp; var $wrapper = $(".container1");&nbsp; var add_button = $(".add_form_field");&nbsp; $(add_button).click(function(e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; const vals = $("> .item input[name^=poids]",$wrapper).map(function() { return +this.value }).get()&nbsp; &nbsp; const val = vals.length === 0 ? 0 : vals.reduce((a, b) => a + b);&nbsp; &nbsp; if ($("> .item",$wrapper).length < max_fields && val < 100) {&nbsp; &nbsp; &nbsp; const $form_colis = $(".item").first().clone();&nbsp; &nbsp; &nbsp; $form_colis.find("input").val("");&nbsp; &nbsp; &nbsp; $wrapper.append($form_colis); //add input box&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; alert('You Reached the limits')&nbsp; &nbsp; }&nbsp; });&nbsp; $wrapper.on("click", ".delete", function(e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; $(this).parent('div').remove();&nbsp; })});.container1 .item:first-of-type .delete {&nbsp; 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">&nbsp; <div class="item">&nbsp; &nbsp; <input type="text" placeholder="Poids" name="poids[]">&nbsp; &nbsp; <input type="text" placeholder="Longueur" name="longueurs[]">&nbsp; &nbsp; <input type="text" placeholder="Largeur" name="largeurs[]">&nbsp; &nbsp; <input type="text" placeholder="Hauteur" name="hauteurs[]">&nbsp; &nbsp; <a href="#" class="delete">Delete</a>&nbsp; </div></div>

Answer 2

如果我正确理解了你的问题，那么请检查我修改过的这个解决方案。如果所有字段的总和恰好小于100，则添加新字段，否则不添加。有必要吗？$(document).ready(function() {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var max_fields = 10;&nbsp; var wrapper = $(".container1");&nbsp; var add_button = $(".add_form_field");&nbsp; var x = 1;&nbsp; $(add_button).click(function(e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp;&nbsp;&nbsp; $('.inputs:last-of-type').each(function(){&nbsp; &nbsp; var sum_inputs = 0;&nbsp; &nbsp; $(this).find('input').each(function(){&nbsp; &nbsp; &nbsp; sum_inputs += parseInt($(this).val());&nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; if (x < max_fields && sum_inputs < '100') {&nbsp; &nbsp; &nbsp; x++;&nbsp; &nbsp; &nbsp; 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>';&nbsp; &nbsp; &nbsp; //$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box&nbsp; &nbsp; &nbsp; $(wrapper).append(form_colis); //add input box&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; alert('You Reached the limits')&nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; });&nbsp; $(wrapper).on("click", ".delete", function(e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; $(this).parent('div').remove();&nbsp; &nbsp; x--;&nbsp; })&nbsp;});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container1">&nbsp; <button class="add_form_field">Add New Field &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; <div class="inputs">&nbsp; &nbsp; <input type="text" placeholder="Poids" name="poids[]">&nbsp; &nbsp; <input type="text" placeholder="Longueur" name="longueurs[]">&nbsp; &nbsp; <input type="text" placeholder="Largeur" name="largeurs[]">&nbsp; &nbsp; <input type="text" placeholder="Hauteur" name="hauteurs[]">&nbsp; </div></div>