Jquery價格檢查計算器

Question

我試圖建立一個價格計算器。我有不同項目的多個類別。每個類別應顯示其總價格值。然後，每個類別的選定項目必須在某處總結並顯示其總體值。

繼承人演示：JSFiddle

$(document).ready(function() { 
    $('input').click(function() { 
     var total1 = 0; 
     $('.option1:checked').each(function() { 
      total1 += parseInt($(this).val()); 
     }); 

     $('.total').html(total1 + ' €') 
     $('.overallprice').html(total1) 
    }); 

    $('input').click(function() { 
     var total2 = 0; 
     $('.option12:checked').each(function() { 
      total2 += parseInt($(this).val()); 
     }); 

     $('.total2').html(total2 + ' €') 
     $('.overallprice').html(total2) 
    }); 
}); 

Answer 1

您正在爲每個總計部分註冊點擊處理程序，並將總計價格等於上次計算的總計，而不是總計總和。你可以有一個單擊處理程序並計算總數。不要總跨度的總和，並把它放在整體，見下面的代碼

$(document).ready(function() { 
    $('input[type="checkbox"]').click(function() { 
    var total = 0; 
    var $parent = $(this).closest('ul'); 
    $parent.find('input:checked').each(function() { 
     total += parseInt($(this).val()); 
    }); 
    //find span having class start with total by using start with selector 
    $parent.find('span[class^=total]').html(total + ' €'); 

    var overallPrice = 0; 
    $('span[class^=total]').each(function() { 
    //span having class start with total 
     overallPrice += parseInt($(this).html().replace(' €','')); 
    }); 
    $('.overallprice').html(overallPrice) 
    }); 
}); 

JSFiddle Demo

Answer 2

像this？

$(document).ready(function() { 

    $('ul').each(function(){ 
     var $thisUl = $(this); 
     $thisUl.find('input').change(function(){ 
      var total = 0; 
      $thisUl.find('input:checked').each(function() { 
       total += parseInt($(this).val()); 
      }); 
      $thisUl.find('li:last span').html(total + ' €') 
     }); 
    }); 

    $('input').change(function(){ 
     var overAllPrice = 0; 
     $('input:checked').each(function(){ 
      overAllPrice += parseInt($(this).val()); 
     }) 
     $('.overallprice').html(overAllPrice); 
    }) 
}); 

Answer 3

我已經更新您的jsfiddle

驗證功能。 實際上，這個概念是獲取所有選中的複選框，然後總值的總和。

function calTotal() { 
    var totalprice = 0; 
    $('#form input:checked').each(function() { 
     totalprice += parseInt($(this).val()); 
    }); 
    $('.overallprice').html(totalprice); 
} 

你需要調用這個函數爲您所附加

Answer 4

每輸入處理程序只需更換這個腳本到您的jsfiddle：

$(document).ready(function() { 
    $('input').click(function() { 
     var total1 = 0; 
     $('.option1:checked').each(function() { 
      total1 += parseInt($(this).val()); 
     }); 
     $('.total').html(total1 + ' €') 
     $('.overallprice').html(total1); 

     var total2 = 0; 
     $('.option12:checked').each(function() { 
      total2 += parseInt($(this).val()); 
     }); 
     $('.total2').html(total2 + ' €') 
     $('.overallprice').html(total2); 

     var total3 = 0; 
     $('.option13:checked').each(function() { 
      total3 += parseInt($(this).val()); 
     }); 
     $('.total3').html(total3 + ' €'); 
     $('.overallprice').html((total1 + total2 + total3) + ' €'); 
    }); 
}); 

Answer 5

DEMO

• 保持一所有的單人click event handler所述checkbox
• 確定點擊了哪個checkbox並更新其相對總相應
• 所有checkbox更新total執行單獨each迴路。

你更新的JS是：

$(document).ready(function() { 
    $('input[type=checkbox]').click(function() { 
    //one click event attached to all checkbox 
    var parent = $(this).closest('ul'); //get its closest ul element which contains remaining checkbox 
    var total1 = 0;//keep one variable for total to add it to each checkboxes total 
    var overAll = 0;//one for overall total 
    parent.find($('input[type=checkbox]:checked')).each(function() { 
     total1 += parseInt($(this).val()); 
     //each loop on clicked checkbox's siblings 
    }) 
    parent.find('.total').text(total1 + " €");//update total on clicked checkbox hierarchy 
    $('input[type=checkbox]:checked').each(function() { 
     overAll += parseInt($(this).val()); 
     //each loop on all the checkbox which are checked to get overall total 
    }); 
    $('.overallprice').html(overAll) 
    }) 
})