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

Question

I have a table in asp.net mvc . in this table I have a checkbox for every row . I want when I check a checkbox find wage value in that row and sum with other rows wages that checked . I want to do this sum via Jquery or java script .

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

this is my code in asp.net mvc . how can I sum checked values in wage and time now ?

EDIT :

My jQuery code :

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

my html code :

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

any idea ?! what is the problem ?!

Answer 1

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

Thanks a ton. I was having a issue where I wanted do addition of hidden fields for checked check boxes and pass the checkbox value(true or false) to the controller.

@Html.CheckBoxFor was creating a hidden field right next to it for each checkbox

I was using $(this).next().val() this was giging me NAN issue. since it was getting the value of the hidden field.

Thanks you to your post I was able to get the next div hidden field value

I did something like below

Answer 2

Ok, starting with the markup you have shown, correctly wrapped with <table></table> tags, with a div below to show the total:

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

The following jquery (which @Darin wrote) will sum all the checked rows when any checkbox is clicked:

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

This is very close to Darin's original, except that I have changed the last line to output the total to the div with id total. This seems more likely than writing the sum to every row!

This can be seen in this live example: http://jsfiddle.net/ADE3a/

Answer 3

Start by fixing your markup as it is highly broken. Remember that ids must be unique throughout your entire HTML document:

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

then you could subscribe to the .click() event of the checkboxes and accumulate a sum for all wages:

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

And here's a live demo to see it in action: http://jsfiddle.net/pbkjr/