Javascript 复选框将另一个表中的值添加到价格中

Question

有人可以帮我解决这个问题吗？我有一个输入价格值，当您选择不同的复选框时，该值会发生变化，但它不会相加。 我真的不知道如何解决这个问题，如果您选择某项，它会增加总价格，而当您选择另一项时，它会再次增加。

foreach 是从 Extra 表中获取所有 exa_names 以及该项目的复选框和价格。

Javascript

$(document).ready(function(){
    $(".option").change(function(){
        var id = $(this).attr('id');
        console.log(id);

        var id_number = id.split("_")[1];
        console.log(id_number);

        var hidden_input = $(".option_price" + id_number).val();
        console.log(hidden_input);
    })
});

HTML

<label>Options</label><br>
@foreach($options as $option)   
    <div>                       
        <input type="checkbox" class="option" id="option_{{ $option->exa_id }}" name="option_{{ $option->exa_id }}" value="{{ $option->exa_id }}" {{ isset($cache) ? (isset($cache['option_' . $option->exa_id]) ? 'checked' : '')  : (old() ? (old('option_' . $option->exa_id) ? 'checked' : '') : ($inschrijving ? (in_array($registration->exa_id, $registration_options) ? 'checked' : '') : '')) }} >
        <input type="hidden" value="{{ $option->exa_price}}" class="option_price_{{ $option->exa_id }}">
        <label>{{ $option->exa_name }}</label>
        <label>  €{{ $option->exa_price }} </label> 
    </div>
@endforeach 

Html 输入totalprice(必须显示总价)

<div class="row">
            <div class="col-xs-12">
                <div class="form-group">
                    <label>Total</label>
                    <input type="text" name="totalprice" id="totalprice" class="form-control" data-blocked="<>{}" value="0" required>
                </div>
            </div>
        </div>

注册 Controller

$options_ids_array = array();
$options = Extra::all();
foreach($options as $option){
    $option->exa_id = "option_" . $option->exa_id;
    $input_option = $option->exa_id;
    if(!is_null($input_option)){
        $options_ids_array[] = $input_option;
    }
}

$registration->dev_option_id = implode(",", $options_ids_array);
$registration->save();

Answer 1

我认为最好将商品的价格存储在 javascript 变量中(因为它可以防止更改隐藏输入的值并在 js 端轻松访问)并通过复选框值访问您的价格(因为它是正是您尝试通过 id 值通过 _ 字符分割来获取的 id)。要从选中的复选框添加价格(如果它们不是太多复选框)，请创建一个检查函数来检测选中了哪些复选框，然后选择每个复选框的价格并将它们相互添加，然后将其放入您的价格位置。像这样的东西:

var options = $(".option");
var options_price = ['your', 'price', 'values', 'according', 'to', 'options', 'id'];
function optionsPrice() {
    var total_price = 0;
    options.each(function () {
        var option = $(this);
        if (option.is(':checked') && option.val() != '' && $.inArray(option.val(), Object.keys(options_price))) {
                total_price += options_price[option.val()];
        }
    });

    return total_price;
}

在任何复选框更改时调用optionsPrice函数。

或者，如果您的页面上有很多复选框，

您可以拥有一个全局总价变量，并在任何复选框更改时从中添加或减去价格。像这样的东西:

var total_price = 0;
        var options = $(".option");
        var options_price = ['your', 'price', 'values', 'according', 'to', 'options', 'id'];

var option, val;
options.on('change', function() {
    option = $(this);
    val = option.val();
    if(val && val != '' && $.inArray(val, Object.keys(options_price)) !== -1) {
        if(option.is(':checked')) {
            total_price += options_price[option.val()];
        } else {
            if(total_price > 0) {
                total_price -= options_price[option.val()];
            } else {
                total_price = 0;
            }
        }
    }
});

希望对你有帮助:)