Reputation: 499
I am hoping to add the values of multiple select options and also checkboxes together using jQuery but have got a little stuck. My primary issue is that I receive NaN as my combined answer.
I initially just summed dropdowns which worked (an example can be found at http://pure.evolvedublin.com/phone) but now need to add checkboxes into the mix (as seen at http://pure.evolvedublin.com/broadband-phone).
When you click the Start button on both pages, the values become available.
I have tried using the solutions found in jQuery checkbox and select - sum the values and add in var and jQuery update initial price on click on checkbox that has data-price attribute but have not been able to get them working.
My jsfiddle with a sample of my code is here: http://jsfiddle.net/damienoneill2001/77Hhd/
I am using the following code to add the checkboxes, but just dont have it right:
jQuery('input:checkbox').change(function(){
tot=0;
jQuery('input:checkbox:checked').each(function(){
tot+=parseFloat(jQuery(this).val());
});
tot+=parseFloat(document.getElementById("broadband_package").value)+parseFloat(document.getElementById("irish_mobile_package").value)+parseFloat(document.getElementById("intl_landline_package").value)+parseFloat(document.getElementById("intl_mob_package").value);
jQuery('.cost-container').text(tot);
jQuery('.cost-containerb').val(tot);
});
jQuery('.broad .irish_mob').change(function(){
jQuery('input:checkbox').trigger('change');
});
The values should also only add to the total when the Add button is pressed.
Can anyone see where I am going wrong?
Upvotes: 1
Views: 148
Reputation: 5083
The following values return undefined
when I first check something:
document.getElementById("intl_landline_package").value
document.getElementById("intl_mob_package").value
This is because these are div
s, not selects
, so value
is undefined. You will need to loop through the checkboxes in these divs and add up their values individually.
Upvotes: 1