簡體   English   中英

將兩個值與來自收音機和復選框的 JS 相加以獲得總計

[英]Adding Two Values together with JS from radios and checkboxes to get grand total

我正在嘗試將兩個值加在一起以在我的預訂頁面上獲得總計。

用戶使用單選按鈕選擇服務,然后可以使用復選框選擇其他服務。

我正在使用 JavaScript 來計算復選框和單選按鈕。

HTML

<div class="row" id="service_calculate">
    @foreach($pricing as $price)
    <div class="col-lg-4 col-md-6">
        <div class="pricing-table border rounded bg-white text-center">
            <h5 class="pricing-plan rounded-top text-uppercase bg-custom text-light p-3 mb-0">{{$price->service_name}}</h5>
            <div class="price-value py-5 bg-light">
                <h4 class="mb-0">£{{$price->service_cost}}</h4>
            </div>
            <div class="pricing-features p-4">
                <div class="">
                    <label class="btn btn-outline-custom"><input type="radio" name="service" value="{{$price->service_cost}}"> Select {{$price->service_name}}</label>
                </div>
            </div>
        </div>
        <!--end table-->
    </div>
    <!--end col-->
    @endforeach
</div>
<!--end row-->
<div id="calculate_additional">
    <h4 class="mt-5 mb-2">Select Additional Work</h4>
    @foreach($additional as $addition)
    <div class="boxed-element mt-4">
        <div class="boxed-style-1 border  rounded p-4 mb-2">
            <h5 class="text-muted">{{$addition->additional_work}} -- <span class="text-custom">£{{$addition->cost}}</span>
                <label class="btn btn-custom float-right">
                    <input class="checkbox" type="checkbox" name="{{$addition->additional_work}}" value="{{$addition->cost}}"> Select</label></h5>
        </div>
    </div>
    @endforeach
    <div class="boxed-element mt-4">
        <div class="boxed-style-shadow bg-light shadow border rounded p-4 mb-2">
            <h5 class="text-muted" id="servicetotal">Total Service Cost
                <span class="text-custom float-right">0</span></h5>
        </div>
    </div>
    <div class="boxed-element mt-4">
        <div class="boxed-style-shadow bg-light shadow border rounded p-4 mb-2">
            <h5 class="text-muted" id="additionaltotal">Total Additional Cost
                <span class="text-custom float-right">0</span></h5>
        </div>
    </div>
</div>

腳本

<script>
jQuery($ => {
    const calcTotal = () => $checkboxess.filter(':checked').map((i, el) => parseFloat(el.value)).get().reduce((s, v) => s + v, 0);
    let $checkboxess = $("#service_calculate :radio").on('change', e => {
        $("#servicetotal span").text(calcTotal().toFixed(2));
    });
});
</script>
<script>
jQuery($ => {
    const calcTotal = () => $radiobuttons.filter(':checked').map((i, el) => parseFloat(el.value)).get().reduce((s, v) => s + v, 0);
    let $radiobuttons = $("#calculate_additional :checkbox").on('change', e => {
        $("#additionaltotal span").text(calcTotal().toFixed(2));
    });
});
</script>

以上工作正常。

我正在努力解決的是總數,即將收音機添加到復選框中:

#servicetotal + #additionaltotal = #totalprice

我試過了:

<script>
jQuery(document).ready(function($) {
    var sertot = $("#servicetotal").html();
    var addtot = $("#additionaltotal").html();

    function addtotals(sertot, addtot) {
        var sum = parseInt(sertot) + parseInt(addtot);
        return sum;
    };
    var sum = addtotals(sertot, addtot);
    $("#totalprice span").append(sum);
});
</script>

但是我的頁面沒有輸出。

<div class="boxed-element mt-4">
    <div class="boxed-style-shadow bg-light shadow border rounded p-4 mb-2">
        <h5 class="text-muted" id="totalprice">Grand Total
            <span class="text-custom float-right">0</span></h5>
    </div>
</div>

如果有人能指出我正確的方向,我將不勝感激,並提前感謝您提供的任何幫助:o)

如果它是一個數組,請使用:

function stitchArray(arrarr){
    var numArr = arrarr.length;
    var total = [];
    for(var i = 0; i < numArr; i++){
        for(var j = 0; j < arrarr[i].length; j++){
            total.push(arrarr[i][j]);
        }
    }
    return(total);
}
var arr1 = ["I love coding",404,true,{name: "Joe", age: 90}];
var arr2 = [false,"hello world",9999,["derp","nah"]];
alert(stitchArray([arr1,arr2])); //[I love coding,404,true,[objectObject],false,hello world,9999,[derp,nah]]

如果是字符串,請使用str1 + str2

如果它是一個對象,我不知道。

如果是數字,則可以將它們相加。

如果是其他任何事情,請告訴我,也許我可以找到方法。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM