4

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

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

我怎样才能做到这一点？

4

4 回答 4

4

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

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

演示：

http://jsfiddle.net/bGjP4/

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

$(':checkbox:checked').each(function(){
    sum += parseFloat($(this).val());
});
于 2012-07-31T16:24:54.057 回答
3

如果您可以调整 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);

});
于 2012-07-31T16:22:27.437 回答
0 
$(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);
    })
});
于 2012-07-31T16:31:53.977 回答
0

我假设由于您的问题被标记为 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”的包含复选框，如果是这样，则在类“size”的范围内添加值"总计。获得总数后，将其放在 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 );
} );

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

于 2012-07-31T16:32:37.080 回答