Jquery计算(行项目)

时间:2013-08-28 18:10:19

标签: jquery

使用JQuery Calculation快速提问。

假设我有一个表单,其中包含每个项目的复选框和一行总计的文本输入框...

第1项 - 10美元,第2项 - 20美元,第3项 - 30美元,然后是总计

然后另一行......

项目1 - 15美元,项目2 - 25美元,项目3 - 35美元,然后是行总数

如何为每行选择的每个项目建立“行总计”?我已经尝试了一个.each和.map函数,它允许计算(基于'checked'的加法和减法)总计但转移到下一行的行总数,这显然违背了目的。我只能假设某人之前已经使用过这个吗?

这是当前的代码(原来是左边的,因为我觉得我离开了。但是如果你需要的话就是这样的话):

<?php
while($row = mysqli_fetch_array($result)){
    echo '
    <tr>
        <td>'.$row['pkgletter'].'</td>
        <td>'.$row['item1'].'<br />$'.$row['item1_price'].'</td>
        <td><input type="checkbox" class="lineitem" id="'.$row['pkgid'].'" value="'.$row['item1_price'].'" checked="" name="item1" /></td>
        <td>'.$row['item2'].'<br />$'.$row['item2_price'].'</td>
        <td><input type="checkbox" class="lineitem" id="'.$row['pkgid'].'" value="'.$row['item2_price'].'" checked="" name="item2" /></td>
        <td>'.$row['item3'].'<br />$'.$row['item3_price'].'</td>
        <td><input type="checkbox"  class="lineitem" id="'.$row['pkgid'].'" value="'.$row['item3_price'].'" checked="" name="item3" /></td>
        <td>$ <input class="linetotal" id="linetotal'.$row['pkgid'].'" size="10"    type="text" name="linetotal" /></td>
    </tr>';
}
?>

<script>
$(document).ready(function(){
    $(".lineitem").click(function() {
        var id = $(this).attr('id');
        var total = 0;
        $(".lineitem:checked").each(function() {
            total += parseInt($(this).val(), 10);
        });
        $('#linetotal' + id).val(total);
    });
});
</script>

2 个答案:

答案 0 :(得分:1)

Aveendras的答案看起来不错,但我假设你想要一个适用于所有行的代码块,而不是手动为每一行创建一个代码块。我建议你依次点击一个复选框。工作jsFiddle:http://jsfiddle.net/danieltulp/c8ruP/

HTML

<div id="line_01">
    <input type="checkbox"  value="10" />10
    <input type="checkbox"  value="20" />20
    <input type="checkbox"  value="30" />30
    <span class="total">Total: </span>
</div>

<div id="line_02">
    <input type="checkbox"  value="15" />15
    <input type="checkbox"  value="25" />25
    <input type="checkbox"  value="35" />35
    <span class="total">Total: </span>
</div>

的jQuery

$("input").on("click", function(){
    var lineTotal=0;
    var selfID = "#"+$(this).parent().attr('id');
    $(selfID +" > input").each(function(){
        if($(this).is(':checked')){
            lineTotal+=parseInt($(this).val());
        }
    });
    $(selfID + " .total").text("Total: "+lineTotal);
});

我现在搜索了父母的身份证,因为我现在没有办法$($this).("input").each(....如果有人可以改进这一点,请执行

答案 1 :(得分:0)

HTML

<div id="line_01">
 <input type="checkbox"  value="10" />
 <input type="checkbox"  value="20" />
 <input type="checkbox"  value="30" />
</div>

<div id="line_02">
 <input type="checkbox"  value="15" />
 <input type="checkbox"  value="25" />
 <input type="checkbox"  value="35" />
</div>

Jquery的

var lineOneTotal=0;

$('#line_01 > input').each(function(){
 if($(this).is(':checked')){
 lineOneTotal+=parseInt($(this).val());
}
});


var lineTwoTotal=0;

$('#line_02 > input').each(function(){
 if($(this).is(':checked')){
 lineTwoTotal+=parseInt($(this).val());
}
});

alert(line one:'+lineOneTotal+' , line two:'+lineTwoTotal);

我觉得你想要这样的代码。