如何对选定的复选框行值求和

how can I sum selected checkbox(s) row values?

本文关键字：复选框 求和      更新时间：2023-09-26

我在 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>
 }

这是我在 MVC 中的代码 asp.net. 我现在如何在工资和时间中对检查值求和？

编辑：

我的j查询代码： 

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

任何想法？！ 有什么问题？！

首先修复您的标记，因为它非常损坏。请记住，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/

好的，从您显示的标记开始，用<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 的原版非常接近，除了我更改了最后一行以将总数输出到 id 为 total 的div 中。这似乎比将总和写入每一行更有可能！

这可以从这个实时示例中看到：http://jsfiddle.net/ADE3a/

jQuery(document).ready(function ($) {
    var sum = 0;
    $('input[type=checkbox]').click(function () {
        sum = 0;
        $('input[type=checkbox]:checked').each(function () {
            sum += parseFloat($(this).closest('div').find('.payment').val());
        });
        $('#total').val(sum);
    });
});

达林·季米特洛夫

谢谢吨。我遇到了一个问题，我想为选中的复选框添加隐藏字段并将复选框值（真或假）传递给控制器。

@Html.CheckBoxFor 正在为每个复选框在其旁边创建一个隐藏字段

我正在使用 $（this）.next（）.val（） 这让我面临 NAN 问题。 因为它正在获取隐藏字段的值。

感谢您的帖子，我能够获得下一个div 隐藏字段值

我做了下面这样的事情

相关文章：