0

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

これは、asp.netmvcの私のコードです。チェックした値を賃金と時間で合計するにはどうすればよいですか？

編集 ：

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

何か案が ？！何が問題ですか ？！

4

3 に答える 3

4

マークアップは非常に壊れているため、修正することから始めます。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/

于 2012-08-15T08:06:21.657 に答える
1

わかりました。表示したマークアップから始めて、<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);
    });

これは、最後の行を変更して合計をidのdivに出力することを除いて、Darinのオリジナルに非常に近いものtotalです。これは、すべての行に合計を書き込むよりも可能性が高いようです。

これは、このライブの例で見ることができます：http: //jsfiddle.net/ADE3a/

于 2012-08-15T08:52:26.727 に答える
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);
    });
});

ダリン・ディミトロフ

トンありがとう。チェックされたチェックボックスの非表示フィールドを追加し、チェックボックスの値（trueまたはfalse）をコントローラーに渡したいという問題がありました。

@ Html.CheckBoxForは、チェックボックスごとにそのすぐ隣に非表示フィールドを作成していました

私は$（this）.next（）。val（）を使用していましたが、これはNANの問題を引き起こしていました。隠しフィールドの値を取得していたので。

あなたの投稿に感謝します私は次のdiv隠しフィールド値を取得することができました

私は以下のようなことをしました

于 2019-10-16T20:19:26.243 に答える