如何匯總所選復選框的行值？

Question

我在asp.net mvc中有一個表。 在此表中，每行都有一個復選框。 我想在選中一個復選框時在該行中找到工資值，並將其與選中的其他行的工資相加。 我想通過Jquery或Java腳本執行此總和。

    @foreach (var item in Model)
 {
        <tr id="rowid">
            <td>
                <input type="checkbox" name="chk-@intCount" id="chk-@intCount" class="chkclass" />
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.TechnicalNo)
            </td>
            <td class="sum" id="wagein">
                @Html.DisplayFor(modelItem => item.Wage)
            </td>
            <td class="sum" id="time">
                @Html.DisplayFor(modelItem => item.Time)
            </td>
        </tr>
 }

這是我在asp.net mvc中的代碼。 我現在該如何計算工資和時間中的檢查值？

編輯：

我的jQuery代碼：

<script src="/Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.chkclass').click(function() {
        var sum = 0;
        $('.chkclass:checked').each(function() {
            sum += parseFloat($(this).closest('tr').find('.wagein').text());    
        });
        $('#sum').html(sum);
    });​
    });
</script>

我的html代碼：

<tr>
    <td>
         <input type="checkbox" name="chk-1" id="chk-1" class="chkclass" />
    </td>
    <td class="sum wagein">
        10
    </td>
</tr>
<tr>
    <td>
        <input type="checkbox" name="chk-2" id="chk-2" class="chkclass" />
    </td>
    <td class="sum wagein">
        10
    </td>
</tr>

任何想法 ？！ 問題是什么 ？！

Answer 1

首先修復標記嚴重損壞的問題。 請記住，id在整個HTML文檔中必須是唯一的：

@foreach (var item in Model)
{
    <tr>
        <td>
            <input type="checkbox" name="chk-@intCount" id="chk-@intCount" class="chkclass" />
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TechnicalNo)
        </td>
        <td class="sum wagein">
            @Html.DisplayFor(modelItem => item.Wage)
        </td>
        <td class="sum">
            @Html.DisplayFor(modelItem => item.Time)
        </td>
    </tr>
}

那么您可以訂閱復選框的.click()事件並累積所有工資的總和：

$(function() {
    $('.chkclass').click(function() {
        var sum = 0;
        $('.chkclass:checked').each(function() {
            sum += parseFloat($(this).closest('tr').find('.wagein').text());
        });
        alert(sum);
    });
​});

這是一個現場演示，可以實際操作： http : //jsfiddle.net/pbkjr/

Answer 2

好的，從顯示的標記開始，用<table></table>標記正確包裝，下面有一個div來顯示總數：

<table>
<tr>
    <td>
         <input type="checkbox" name="chk-1" id="chk-1" class="chkclass" />
    </td>
    <td class="sum wagein">
        10
    </td>
</tr>
<tr>
    <td>
        <input type="checkbox" name="chk-2" id="chk-2" class="chkclass" />
    </td>
    <td class="sum wagein">
        10
    </td>
</tr>
</table>
<div id="total"></div>

單擊任何復選框時，以下jquery（@Darin編寫）將匯總所有選中的行：

$('.chkclass').click(function() {
        var sum = 0;
        $('.chkclass:checked').each(function() {
            sum += parseFloat($(this).closest('tr').find('.wagein').text());    
        });
        $('#total').html(sum);
    });

這與Darin的原始版本非常接近，只不過我更改了最后一行以將total輸出到id為total的div。 這似乎比將總和寫入每一行更有可能！

在下面的實時示例中可以看到： http : //jsfiddle.net/ADE3a/