Question

我在循环中读取以下代码来读取文件夹的内容：

<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>

当复选框被选中时，我希望将每条记录的大小添加到一个单独的div中：

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

我该怎么做？

Answer 1

正如Shane所说，最好将普通数字保存在属性中。如果那不可能，你仍然可以这样做：

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

演示：

http://jsfiddle.net/bGjP4/

以下是如何将其保存为复选框中的值：

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

Answer 2

如果您可以调整HTML，我建议将大小值放在大小跨度或复选框的数据属性中。这将使您的jquery总计算更容易...

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

然后你的jquery会是这样的：

$(function() {

    var total = 0;
    $(".checkTotal:checked").each(function(idx, elem) {
         total = total + parseFloat($(elem).data('size'));
    });
    $('#total').text('total = ' + total);

});

Answer 3

$(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);
    })
});

Answer 4

我假设你的问题用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”类的复选框，如果是，则在span中添加值等级“大小”到总数。获得总数后，将其放入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 );
} );

使用选择器查找选中的复选框而不是条件，然后使用父遍历查找相关的大小跨度。

单击相应的复选框时，对div的内容求和

4 个答案: