JavaScript 僅計算選中的復選框

Question

我有產品列表，我想在選中它們的復選框時計算它們的價格，目前我的代碼將計算所有復選框，包括未選中的復選框。

JavaScript

<script>
    $(document).ready(function () {
        $(".bundlechecked").on('click', function () { //div checkbox
            var pp = 0;
            $(".thisPrice").each(function() { //input where price comes from
                if(!isNaN(this.value) && this.value.length!=0) 
                {
                    pp += parseFloat(this.value);            
                }         
            });
            console.log(pp);
        });
    });
</script>

Blade (View)

@foreach($bundles as $product)
    <div class="bundlechecked checkbox"> // how we define which item is selected (bundlechecked)
        <label><input type="checkbox" value="{{$product->id}}">
            <div class="product-thumb">
                <div class="image"><img src="{{url('/')}}/images/{{$product->imageOne}}" alt="{{$product->imageOne_alt}}" title="{{$product->title}}" class="img-responsive" /></div>
                <div class="caption">
                <h4>{{$product->title}}</h4>
                @if(!empty($product->newprice))
                <p class="price">
                    <span class="price-new">{{ __('frontend.rp') }} {{ number_format($product->newprice, 0) }}</span>
                    <input type="hidden" class="thisPrice" value="{{$product->newprice}}"> // getting price of selected item
                    <span class="price-old">{{ __('frontend.rp') }} {{ number_format($product->price, 0) }}</span>
                    <span class="saving">
                    - {{number_format(($product->price - $product->newprice) / $product->price * 100, 0) }}%
                    </span>
                </p>
                @else
                <p class="price"> {{ __('frontend.rp') }} {{ number_format($product->price, 0) }} </p>
                <input type="hidden" class="thisPrice" value="{{$product->price}}"> // getting price of selected item
                @endif
                </div>
            </div>
        </label>
    </div>
@endforeach

我評論了代碼以便更好地理解

任何想法？

Answer 1

嘗試這個：

    <script>
        $(document).ready(function () {
            $(".bundlechecked").on('click', function () { //div checkbox
                var pp = 0;
                $(".thisPrice").each(function() { //input where price comes from
                     var checkbox = $(this).parent("label").find("input[type=checkbox]");
                     if (checkbox.prop('checked') && !isNaN(this.value) && this.value.length!=0)
                     {
                         pp = +pp + +parseFloat($(this).val());
                     }
                });
                console.log(pp);
            });
        });
    </script>

這是 JSFiddle： https://jsfiddle.net/leonenco/8ojdesz6/26/

Answer 2

嘗試這個

• onchange事件更適合這個目的
• 關鍵是只獲取那些被檢查的價格節點

 var price = 0; const calculatePrice = function(e) { let val = $(e).siblings().first().find('.caption.thisPrice').first().val(); if(.isNaN(val) && val;length;= 0){ price += parseInt(val). } }. $(document).ready(function(){ $(',bundlechecked');on('change'. function(e){ price = 0: $('.bundlechecked,checked'),each((i; e. s) => calculatePrice(e)); console.clear(), console;log('Total price =>'; price); }); });

 label { display: block;} label * { display: inline;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label> <input type="checkbox" class="bundlechecked"> <div class="product-thumb"> <div class="caption"> <h4>Product One - 10</h4> <input type="hidden" class="thisPrice" value="10"> </div> </div> </label> <label> <input type="checkbox" class="bundlechecked"> <div class="product-thumb"> <div class="caption"> <h4>Product Two - 25</h4> <input type="hidden" class="thisPrice" value="25"> </div> </div> </label> <label> <input type="checkbox" class="bundlechecked"> <div class="product-thumb"> <div class="caption"> <h4>Product Three - 12</h4> <input type="hidden" class="thisPrice" value="12"> </div> </div> </label> <label> <input type="checkbox" class="bundlechecked"> <div class="product-thumb"> <div class="caption"> <h4>Product Four - 30</h4> <input type="hidden" class="thisPrice" value="30"> </div> </div> </label> <label> <input type="checkbox" class="bundlechecked"> <div class="product-thumb"> <div class="caption"> <h4>Product Five - 15</h4> <input type="hidden" class="thisPrice" value="15"> </div> </div> </label>

Answer 3

嘗試這個

$(document).ready(function () {
        $("input[type='checkbox']").on('click', function () { 
            if($(this).is(':checked')) {
            var getCurrentParent = $(this).parents('.bundlechecked').first();
            var pp = [];
            $(getCurrentParent).find(".thisPrice").each(function() { //input where price comes from
                if(!isNaN(this.value) && this.value.length!=0) 
                {
                    pp.push(this.value);            
                }         
            });
            console.log(pp);
            }
        });
    });