如何使用 jQuery 对每个输入数字（通过单击按钮）求和

Question

我正在尝试从按钮中获取每个输入的总和，所有输入的总和不能超过 4。但是，我只能使每个输入不超过 4，而每个输入中的总和只有总和，而不是所有输入的总和。 //抱歉，如果我的 question/explanation 让任何人感到困惑，因为我真的不知道如何用语言表达。但代码的目标是不让客人总数超过 4。

<!DOCTYPE HTML>
<html>
<head>
        <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
            crossorigin="anonymous"></script>

</head>

<body>
    <div class="container-fluid Guests-S">
        <div id="form">
            <div class="G-title"><b>Guests</b> (Max. 4 pax for the selected facilities)</div>
            <form>
                <div class="G-box">
                    <label for="Staff" class="Guests">Park Company's Staff</label>
                    <div class="dec button">-</div>
                    <input type="text" name="qty" id="1" readonly="" value="0" placeholder="0" class="input-filed"><br>
                    <div class="inc button">+</div>
                </div>
                <div class="G-box">
                    <label for="Staff" class="Guests">Guest - Adults</label>                
                    <div class="dec button">-</div>
                    <input type="text" name="qty" id="2" readonly="" value="0" placeholder="0" class="input-filed"><br>
                    <div class="inc button">+</div>
                </div>
                <div class="G-box">
                    <label for="Staff" class="Guests">Guest - Children</label>
                    <div class="dec button">-</div>
                    <input type="text" name="qty" id="3" readonly="" value="0" placeholder="0" class="input-filed"><br>
                    <div class="inc button">+</div>
                </div>
                <div class="G-box">
                    <label for="Staff" class="Guests">Total</label>
                    <input type="text" id="total" value="0" disabled=""><br>
                </div>
                 
                <script>
                    $(document).ready(function () {
                        $('.dec').click(function (e) {
                            var form = $(this).parents('.G-box');
                            var inputfiled = form.find('.input-filed').val();
                            console.log(inputfiled);
                            var total = parseInt(inputfiled);
                            total -= 1;
                            if (total < 0) {
                                total = 0;
                            }
                            form.find('.input-filed').val(total);
                            $('#total').val(total);
                        });
                        $('.inc').click(function (e) {
                            var form = $(this).parents('.G-box');
                            var inputfiled = form.find('.input-filed').val();
                            console.log(inputfiled);
                            var total = parseInt(inputfiled);
                            total += 1;
                            if (total > 4) {
                                total = 4;
                            }
                            console.log(total);
                            form.find('.input-filed').val(total);
                            $('#total').val(total);
                        });
                    });
                </script>
            </form>
        </div>
    </div>
</body>

Answer 1

使用一个简单的函数循环遍历 input 和 name=qty

$(document).ready(function () {
    $('.dec').click(function (e) {
        var form = $(this).parents('.G-box');
        var inputfiled = form.find('.input-filed').val();
        //console.log(inputfiled);
        //console.log(total);
        var qty = parseInt(inputfiled);
        qty = (qty <= 0) ? 0 : (qty-1); // short hand if statement
        form.find('.input-filed').val(qty);
        $('#total').val(get_total_qty()); // <<< Here
        //}
    });
    $('.inc').click(function (e) {
        var form = $(this).parents('.G-box');
        var inputfiled = form.find('.input-filed').val();
        //console.log(inputfiled);
        let total = get_total_qty();
        //console.log(total);
        if(total < 4){
          var qty = parseInt(inputfiled);
          qty = (qty >= 4) ? 4 : qty+1; // short hand if statement
          form.find('.input-filed').val(qty);
          $('#total').val(get_total_qty()); // <<< Here
        }
        
    });
});
// function to loop through the inputs qty and get total
function get_total_qty(){
  let total = 0;
  $("input[name='qty']").each(function(){
    total += +this.value
  });
  return total <= 4 ? total : 4;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form">
            <div class="G-title"><b>Guests</b> (Max. 4 pax for the selected facilities)</div>
            <form>
                <div class="G-box">
                    <label for="Staff" class="Guests">Park Company's Staff</label>
                    <div class="dec button">-</div>
                    <input type="text" name="qty" id="1" readonly="" value="0" placeholder="0" class="input-filed"><br>
                    <div class="inc button">+</div>
                </div>
                <div class="G-box">
                    <label for="Staff" class="Guests">Guest - Adults</label>                
                    <div class="dec button">-</div>
                    <input type="text" name="qty" id="2" readonly="" value="0" placeholder="0" class="input-filed"><br>
                    <div class="inc button">+</div>
                </div>
                <div class="G-box">
                    <label for="Staff" class="Guests">Guest - Children</label>
                    <div class="dec button">-</div>
                    <input type="text" name="qty" id="3" readonly="" value="0" placeholder="0" class="input-filed"><br>
                    <div class="inc button">+</div>
                </div>
                <div class="G-box">
                    <label for="Staff" class="Guests">Total</label>
                    <input type="text" id="total" value="0" disabled=""><br>
                </div>
                 
                <script>
                    
                </script>
            </form>
        </div>
    </div>

如何使用 jQuery 对每个输入数字（通过单击按钮）求和

how to sum total of each input number(from clicking button)using jQuery

html

javascript

jquery