我在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>
任何想法?!有什么问题?!
答案 0 :(得分:4)
首先修复标记,因为标记非常破碎。请记住,整个HTML文档中的ID必须是唯一的:
@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/
答案 1 :(得分:0)
好的,从您显示的标记开始,使用<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/
答案 2 :(得分:0)
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);
});
});
Darin Dimitrov
一吨。我遇到一个问题,我想为选中的复选框添加隐藏字段,然后将复选框值(真或假)传递给控制器。
@ Html.CheckBoxFor正在为每个复选框在其旁边创建一个隐藏字段
我正在使用$(this).next()。val()这让我感到烦恼。因为它正在获取隐藏字段的值。
感谢您的帖子,我能够获得下一个div隐藏字段值
我做了下面的事情