Thanks for that, but unfortunately I still don’t quite get what kind how those values relate to each other regarding sum vs. range. Here’s how you might get the summed prices of each form group (or the entire form) generically though, maybe that helps:
function getPrice (selector) {
return $(selector)
// Find all checked price elements within the container
.find('[data-price]:checked')
// Map them to their given prices
.map(function () {
return parseFloat(this.dataset.price)
})
// Get an array from the jQuery collection
.get()
// And sum the values
.reduce(function (a, b) {
return a + b
}, 0)
}
$('form').on('change', function () {
var servicesPrice = getPrice('.services')
var licensesPrice = getPrice('.license')
var totalPrice = getPrice('form')
$('.price-services').text(servicesPrice)
$('.price-license').text(licensesPrice)
$('.price-total').text(totalPrice)
})
You might sum up not only the values of the $(.checkbox)es and $(.radio)s separately, but of all $(.checkbox, .radio)s combined – or the $(:checked) elements of a common container… see my pen above which does exactly that.
Just as a passing remark, you’re actually already doing this for the checkboxes – just not for the radios:
$('.checkbox').on('change', function () {
// var checkticked = [];//array for checkboxes
var price = 0
$('.checkbox').each(function () {
// checkticked.push($(this).attr('data-link'));//get checkboxes
if ($(this).is(':checked')) {
price = price + parseInt($(this).attr('data-price'))
}
// sum of all price values of this into price
$('.price2').html(price)
})
})
… so if you get the price from the checked .radio element in the same way, you might also add both prices to a global total variable or something; alternatively, you might loop over the checkboxes and radios together using a selector list and output the combined result.
Now either way your code is going to be a bit repetitive, so what I did in my pen is abstract away the summing to a dedicated function. Sorry if I was getting carried away with the refactoring… yes that can certainly be done using your code as well. But yeah better give it a try yourself first. :-)
$('.radio').on("change", function() {
// $(".radio") // select the radio by its id
// .change(function(){ // bind a function to the change event
if( $(this).is(":checked") ){ // check if the radio is checked
var val = $(this).val(); // retrieve the value
$(".price").html(val); //Print the value
}
// });
});
$( document ).ready(function() {
$('.radio').on("change", function() {
// $(".radio") // select the radio by its id
// .change(function(){ // bind a function to the change event
if( $(this).is(":checked") ){ // check if the radio is checked
var val = $(this).val(); // retrieve the value
$(".price").html(val); //Print the value
}
// });
});
$('.checkbox').on("change", function() {
// var checkticked = [];//array for checkboxes
var price = 0;
$('.checkbox').each(function() {
// checkticked.push($(this).attr('data-link'));//get checkboxes
if($(this).is(':checked')){
price = price + parseInt($(this).attr('data-price'));
}
//sum of all price values of this into price
$('.price2').html(price);
});
});
var sum = price + val;
$('.totalprice').html(sum);
});
But this is not calculating the sum → var sum = price + val;
