在 jQuery 的文本字段中显示多选复选框的总和

Question

在我的 laravel 应用程序中，我在一个表单中设置了一组复选框。

<div class="col-xs-12 col-sm-12 col-md-12">

        <div class="form-group">

          
            <strong>Test List :</strong>

            <br>

            @foreach($ttype as $value)

                <script type="text/javascript">
                    jQuery(function () {
                        var boxId='<?php echo''.$value->id.''; ?>';
                        var boxPrice='<?php echo''.$value->test_desc.''; ?>';
                        var sum=0;
                    jQuery("#cbox"+boxId).click(function () {
                        if (jQuery(this).is(":checked")) {
                            sum = sum + parseInt(boxPrice);
                              jQuery('#msg').val(sum);

                        } else {
                            jQuery("#text").hide();
                        }
                    });
                });
                </script>

                <label>{{ Form::checkbox('samp_list[]', $value->test_name, false, array('class' => 'name','sumT'=>''.$value->test_desc.'','id'=>'cbox'.$value->id.'')) }}

                {{ $value->test_name }}</label>

            <br/>

            @endforeach


        </div>

    </div>

每个复选框都有自己的值，称为费用，例如：复选框 1 的费用为 450，复选框 2 的费用为 1000...。第 10 个复选框的费用为 2300...

现在，每当用户选择复选框时，我都会尝试在文本字段中显示这些选中复选框的总和。

 {!! Form::text('samp_charges', null, array('placeholder' => 'Registration Charges','class' => 'form-control','id'=>'msg')) !!}

但我的问题是，每当我选择超过 1 个选项时，它都不会显示总和。相反，它给了我最后选择的复选框的值。

如何在该文本字段中显示所有选定复选框的总和，一旦我取消选择一个复选框，从总和中减去该值

Answer 1

1. 使用类和数据属性 - 在纯 HTML/PHP 中看起来像

   <input class="cbox" type="checkbox" data-price="<?= $boxprice ?>" />
   

2. 代表：

$(function() {
  $(".cbox").on("change", function() {
    const vals = $(".cbox:checked")
      .map(function() {
        return +this.dataset.price
      })
      .get();
    // test we have an array of values
    const sum = vals.length>0 ? vals.reduce((a, b) => a + b) : 0; // if no, zero sum
    $('#msg').val(sum)
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
100: <input class="cbox" type="checkbox" data-price="100" /><br/> 200: <input class="cbox" type="checkbox" data-price="200" /><br/> 300: <input class="cbox" type="checkbox" data-price="300" /><br/>

<input type="text" readonly id="msg" />

如果你不喜欢使用class class，那就用$("[id^=cbox]")代替$(".cbox")