Javascript 如何对选中的复选框行值求和？

我在asp.NETMVC中有一个表。在这个表中，我对每一行都有一个复选框。当我选中复选框时，我想在该行中查找工资值，并与选中的其他行工资相加。 我想通过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>
 }

@foreach（模型中的变量项）
{
@DisplayFor（modelItem=>item.Name）
@DisplayFor（modelItem=>item.TechnicalNo）
@DisplayFor（modelItem=>item.Wage）
@DisplayFor（modelItem=>item.Time）
}

这是我在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>

$（文档）.ready（函数（）{
$（'.chkclass'）。单击（函数（）{
var总和=0；
$（'.chkclass:checked'）。每个（函数（）{
sum+=parseFloat（$（this）.closest（'tr'）.find（'.wagein'）.text（））；
});
$（'#sum'）.html（sum）；
});​
});

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

10
10

---

有什么想法吗？！有什么问题

首先修复标记，因为它已严重损坏。请记住，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>
}

---

这里有一个现场演示，可以看到它的实际效果：

首先修复标记，因为它已严重损坏。请记住，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>
}

---

这里有一个现场演示，可以看到它的实际效果：

好的，从您显示的标记开始，用

标记正确包装，下面有一个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>

这与Darin的原始版本非常接近，只是我更改了最后一行，将总计输出到id为

total

的div中。这似乎比将总和写入每一行更有可能

---

这可以在这个实时示例中看到：

确定，从您显示的标记开始，用

标记正确包装，下面有一个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>

这与Darin的原始版本非常接近，只是我更改了最后一行，将总计输出到id为

total

的div中。这似乎比将总和写入每一行更有可能

这可以在这个实例中看到：

jQuery（文档）.ready（函数（$）{
var总和=0；
$（'input[type=checkbox]'）。单击（函数（）{
总和=0；
$（'input[type=checkbox]：选中'）。每个（函数（）{
sum+=parseFloat（$（this）.closest（'div'）.find（'.payment'）.val（））；
});
$（'总计'）.val（总和）；
});
});
jQuery（文档）.ready（函数（$）{
var总和=0；
$（'input[type=checkbox]'）。单击（函数（）{
总和=0；
$（'input[type=checkbox]：选中'）。每个（函数（）{
sum+=parseFloat（$（this）.closest（'div'）.find（'.payment'）.val（））；
});
$（'总计'）.val（总和）；
});
});它不工作。你好像什么都没跟我说。定义不工作。因为这对我来说非常好，正如你在这个现场演示中看到的：不工作是不知道或不关心程序如何工作的用户常用的一句话。另一方面，请求帮助的开发人员必须更详细地解释这一点。他们有错误吗？您是否查阅过javascript调试工具控制台。。。是的，它在你的演示中起作用。但我不知道为什么它对我不起作用。我在我的页面中跳过了你的代码。但还不起作用。问题是什么？！：|我到底怎么知道为什么你的代码在没有显示代码的情况下不能工作？你可能弄错了。我无法知道这一点，因为我无法读懂你的心思。是否要显示视图的呈现HTML标记？我需要查看浏览器看到的呈现HTML标记，而不是Razor代码。不，这只是一个表行。请在浏览器中显示完整的HTML。在浏览器中右键单击=>选择查看页面源。然后选择全部，复制到剪贴板并粘贴到这里，这样我就可以看到你的实际代码。它不起作用。你好像什么都没跟我说。定义不工作。因为这对我来说非常好，正如你在这个现场演示中看到的：不工作是不知道或不关心程序如何工作的用户常用的一句话。另一方面，请求帮助的开发人员必须更详细地解释这一点。他们有错误吗？您是否查阅过javascript调试工具控制台。。。是的，它在你的演示中起作用。但我不知道为什么它对我不起作用。我在我的页面中跳过了你的代码。但还不起作用。问题是什么？！：|我到底怎么知道为什么你的代码在没有显示代码的情况下不能工作？你可能弄错了。我无法知道这一点，因为我无法读懂你的心思。是否要显示视图的呈现HTML标记？我需要查看浏览器看到的呈现HTML标记，而不是Razor代码。不，这只是一个表行。请在浏览器中显示完整的HTML。在浏览器中右键单击=>选择查看页面源。然后选择all，复制到剪贴板并粘贴到这里，这样我就可以看到您的实际代码了。您对非常旧的jquery版本感兴趣-是否考虑升级？应该是向后兼容的！这里显示的标记和jquery代码的组合工作良好。检查这把小提琴：-唯一的区别是我将总数输出到一个新的div，id
total
放在表格下面。@jamice:我将它升级到1.8.0。您的JSFIDLE演示不起作用。但对于达林来说，你必须停止说“不行”。它怎么不起作用？你有错误吗？总数没有显示出来吗？不管怎样，它对我来说很好-你用的是什么浏览器？@波斯语，有一个
>）在脚本中的HTML中。这是一个无效的javascript，在紧接着<