Geek Answers Handbook

Summarize the contents of divs by clicking on the corresponding checkbox

I have the following code in a loop reading the contents of a folder:

<div class="oddrow"> <span class="title">1 - 1215 - Magna Carta</span><br/> <span class="size">size: 229.1 MB</span> <input name="1215 - Magna Carta" type="checkbox"> <div>

When the checkbox is checked, I want the dimensions of each record to be added to a separate div:

 <div id="total>total = </div>

How can i do this?

+4
source share
4 answers

As Shane said, it would be better to keep a prime in the attribute. If this is not the case, you can still do it like this:

 $(':checkbox:checked').each(function(){ sum += parseFloat($(this).prev().text().match(/[\d\.]+/)); });

Demo:

http://jsfiddle.net/bGjP4/

Here you can save it as a value in the fields:

 $(':checkbox:checked').each(function(){ sum += parseFloat($(this).val()); });
+4
source

If you can customize the HTML, I would suggest putting the size value in the data attribute of the size range or checkbox. This will simplify your overall jquery calculator ...

 <input name="..." type="checkbox" data-size="229.1" class="checkTotal" />

Then your jquery will look something like this:

 $(function() { var total = 0; $(".checkTotal:checked").each(function(idx, elem) { total = total + parseFloat($(elem).data('size')); }); $('#total').text('total = ' + total); });
+3
source 
 $(document).ready(function(){ $("input[type='checkbox']").on('change', function(){ var sum = 0; $("input[type='checkbox']:checked").each( function() { sum += $(this).siblings('.size').text().split(' ')[1]; } ); $('#total').text('total = ' + sum); }) });
0
source

I assume jQuery is flagged from your question, that you are using jQuery.

If you had such divs (note the few classes that I added):

 <div class="oddrow rows_to_add"> <span class="title">1 - 1215 - Magna Carta</span><br/> <span class="size">size: <span class="size">229.1</span> MB</span> <input name="1215 - Magna Carta" class="add_when_checked" type="checkbox"> <div> <div class="evenrow rows_to_add"> <span class="title">1 - 1215 - Magna Carta</span><br/> <span class="size">size: <span class="size">229.1</span> MB</span> <input name="1215 - Magna Carta" class="add_when_checked" type="checkbox"> <div>

And the full div:

 <div id="total>total = <span id="total"></span></div>

JQuery code to summarize them:

 $( '.add_when_checked' ).change( function() { var total = 0; $( '.rows_to_add' ).each( function() { var $this = $( this ); if ( $this.find( '.add_when_checked' ).attr( 'checked' ) ) { total += $this.find( '.size' ).html(); } } ); $( '#total' ).html( total ); } );

This basically means that when a flag changes state, a loop through all the divs with the "rows_to_add" class is checked when the flag contained in the "add_when_checked" class is checked, and if so, add a value within the range using the "size" class to the bottom line. Once you have the total, put it in a div with the identifier "total".

Another way could be something like this:

 $( '.add_when_checked' ).change( function() { var total = 0; $( '.add_when_checked:checked' ).each( function() { total += $( this ).parent().find( '.size' ).html(); } ); $( '#total' ).html( total ); } );

Uses a selector to determine which checkboxes are checked instead of conditional, then uses the parent traversal to find the appropriate size.

0
source

More articles:


All Articles