复选框(如果已选中,则需要以div为单位对其价格求和

时间:2018-11-09 10:31:13

标签: javascript jquery html checkbox

我有一个页面(here you can see it) 如果我单击一个复选框,则需要将其价格与实际价格相加。

复选框具有valuedata-prezzo。这两个数字需要求和为两个不同的div,例如:

value + rata-display-1 = total_rata

data-prezzo + prezzo-somma = total_prezzo

我是新来的,所以我不知道为什么它会给我NaN而不是正确的金额。

代码如下:

//sommo rata e prezzo dei plus a quelli del DB
var basicPrice_rata = 1000 ; // This is how we start
var basicPrice_prezzo = 50000 ; // This is how we start
    
$(document).on('change', getCheck);
    function getCheck() {
    var currentPrice_rata = basicPrice_rata; // every time
    CurrentPrice_rata = basicPrice_rata;
    var currentPrice_prezzo = basicPrice_prezzo; // every time
    CurrentPrice_prezzo = basicPrice_prezzo;
        plus = [],
        total_rata = 1000;
        total_prezzo = 50000; 

    $("input[type=checkbox]").each(function(i, el) {

        if ($(el).is(":checked")) {
            total_rata += parseInt($(el).val());
            total_prezzo += parseInt($(el).data('prezzo'));

            console.log(total_rata);
            plus.push($(el).data('name')); // get the label text
            }
    });


//inserisco i nomi dei plus nella riga di testo
 $("#plus-display").text(plus.join(", "));
    
//inserisco le rate sommate  nei div corrispondenti
 $('#rata-display-2').text(total_rata +" €");
    
//inserisco i prezzi sommati  nei div corrispondenti
 $('#prezzo-somma').text(total_prezzo +" €");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="134.24" data-prezzo="40000" id="box-auto" name="Box auto" data-name="Box auto" class="check-plus w-checkbox-input">
<input type="checkbox" value="17.78" data-prezzo="5000" id="posto-moto" name="Posto moto" data-name="Posto moto" class="check-plus w-checkbox-input">
<input type="checkbox" value="134.24" data-prezzo="40000" id="box-auto" name="Box auto" data-name="Box auto" class="check-plus w-checkbox-input">

<div id="rata-display-2" class="prezzo-checkout">1000 €</div>

<div id="prezzo-somma" class="text-checkout color bold">500000 €</div>

<div id="plus-display" class="text_piccolo black checkout">Interior Pack Incluso nel prezzo</div>

1 个答案:

答案 0 :(得分:1)

您的代码似乎按预期运行,仅缺少函数的结束}

//sommo rata e prezzo dei plus a quelli del DB
var basicPrice_rata = 1000 ; // This is how we start
var basicPrice_prezzo = 50000 ; // This is how we start
    
$(document).on('change', getCheck);
    function getCheck() {
    var currentPrice_rata = basicPrice_rata; // every time
    CurrentPrice_rata = basicPrice_rata;
    var currentPrice_prezzo = basicPrice_prezzo; // every time
    CurrentPrice_prezzo = basicPrice_prezzo;
        plus = [],
        total_rata = 1000;
        total_prezzo = 50000; 

    $("input[type=checkbox]").each(function(i, el) {

        if ($(el).is(":checked")) {
            total_rata += parseInt($(el).val());
            total_prezzo += parseInt($(el).data('prezzo'));

            //console.log(total_rata);
            plus.push($(el).data('name')); // get the label text
            }
    });


//inserisco i nomi dei plus nella riga di testo
 $("#plus-display").text(plus.join(", "));
    
//inserisco le rate sommate  nei div corrispondenti
 $('#rata-display-2').text(total_rata +" €");
    
//inserisco i prezzi sommati  nei div corrispondenti
 $('#prezzo-somma').text(total_prezzo +" €");
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="134.24" data-prezzo="40000" id="box-auto" name="Box auto" data-name="Box auto" class="check-plus w-checkbox-input">
<input type="checkbox" value="17.78" data-prezzo="5000" id="posto-moto" name="Posto moto" data-name="Posto moto" class="check-plus w-checkbox-input">
<input type="checkbox" value="134.24" data-prezzo="40000" id="box-auto" name="Box auto" data-name="Box auto" class="check-plus w-checkbox-input">

<div id="rata-display-2" class="prezzo-checkout">1000 €</div>

<div id="prezzo-somma" class="text-checkout color bold">500000 €</div>

<div id="plus-display" class="text_piccolo black checkout">Interior Pack Incluso nel prezzo</div>