jQuery-将多个值加在一起是复选框

Question

I have a quote form on a page (made using Gravity Forms WP plugin, but that doesn't matter). The form has multiple checkboxes on it - call these options. Each option has a different value 'assigned' to it. What I want to do, is add these values together if that particular checkbox is ticked, and subtract it's value if it's not. I hope that makes sense...?

Here is what I have so far:

jQuery(document).ready( function() {
    jQuery('#choice_2_10_4, #choice_2_10_5').change( function() {
        var option1 = Number( jQuery('#choice_2_10_4:checked').val() || 0 ); // Add 250 if checked
        var option2 = Number( jQuery('#choice_2_10_5:checked').val() || 0 ); // Add 200 if checked
        jQuery('#quote-price').val( option1 + option2 );
    });
});

#quote-price is the field I'd like to show the total of the calculation in.

Can i give #choice_2_10_4 and #choice_2_10_5 a value by changing them to:

jQuery('#choice_2_10_4:checked').val(250)
jQuery('#choice_2_10_5:checked').val(250)

Or something along those lines?

Thanks

Answer 1

Yes, you can set the value but after that you have to trigger the change event like so:

jQuery('#choice_2_10_4:checked').val(250).trigger('change');
jQuery('#choice_2_10_5:checked').val(250).trigger('change');

 $(function() { $('.choice').on('change', function() { var total = 0; $('.choice').each(function() { total += this.checked ? +this.value : -this.value; }); $('#quote-price').val( total ); }) .change(); $('.add').on('click', function() { var target = $(this).data('target'), theval = $(target).is(':checked') ? +$(this).data('value') : +$(target).val(); $(target).val( theval ).trigger('change'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="choice_2_10_4" class="choice" value="200"> 200 <button type="button" data-target="#choice_2_10_4" data-value="250" class="add">Add 250</button><br> <input type="checkbox" id="choice_2_10_5" class="choice" value="400"> 400 <button type="button" data-target="#choice_2_10_5" data-value="350" class="add">Add 350</button><br> <input type="text" readonly="readonly" id="quote-price"/> 

Answer 2

Instead of assigning a value to the checkboxes via #choice_2_10_4:checked').val(250) you can just put the value into the checkbox in the first place eg <input type="checkbox" value="250" />

Then just call it via #choice_2_10_4:checked').val()

When you call #choice_2_10_4:checked').val(250) it returns an array of elements.

console.log() it to see it for yourself