あなたの質問はjQueryでタグ付けされているので、jQueryを使用していると思います。
このような div がある場合 (追加したいくつかのクラスに注意してください):
<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>
そして総div:
<div id="total>total = <span id="total"></span></div>
それらを合計するjQueryコード:
$( '.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 );
} );
基本的にこれは、チェックボックスの状態が変化すると、クラス「rows_to_add」ですべてのdivを循環し、クラス「add_when_checked」で含まれているチェックボックスがいつチェックされるかを確認し、そうであれば、クラス「サイズ」でスパン内に値を追加します合計に。合計を取得したら、それを id "total" の div に配置します。
別の方法としては、次のようなものがあります。
$( '.add_when_checked' ).change( function() {
var total = 0;
$( '.add_when_checked:checked' ).each( function() {
total += $( this ).parent().find( '.size' ).html();
} );
$( '#total' ).html( total );
} );
セレクターを使用して、条件の代わりにチェックされているチェックボックスを見つけ、次に親トラバーサルを使用して関連するサイズスパンを見つけます。