0

すべてのチェック oxes をチェックし、データ属性に含まれる値を計算したい:-

<table>
  <thead>
    <tr>
      <th style="text-align: center;">Pay? <input class="chkSelectAllTimeLogs" type="checkbox" /> </th>
    </tr>
  </thead>

  <tbody>
    @for (int i = 0; i < 10; i++)
    {
      <tr>
        <td style="text-align: center;">
          @Html.CheckBoxFor(model => Model.timeLogCollection[i].IsCheckedTimeLog, new { @class = "timeLogItem", data_amount = i } )
        </td>
      </tr>
    }
  </tbody>
</table>

<div id="divTotalAmount" style="text-align: center; font-size: 30px; font-family: Tahoma; font-weight: bold;">
  0.00
</div>

私が欲しいのは、クラス「chkSelectAllTimeLogs」のチェックボックスをクリックしてから1.クラス「timeLogItem」のすべてのチェックボックスをオンにする必要があります2.データ量の値は、それに応じて計算する必要があります。単一または複数のクリック。

現在、私は次のように機能する2つの別々の機能を持っています:

私が持っているすべてのチェックをマークするには：

jQuery(".chkSelectAllTimeLogs").click(function () {
  if (jQuery(".chkSelectAllTimeLogs").is(':checked')) {
    jQuery(".timeLogItem").prop("checked", true);
  } else {
    jQuery(".timeLogItem").prop("checked", false);
  }
});

私が持っている合計を計算するには：

function ehRunningTotalForTimeLogPaymentEntry() {
  /* This event handler monitors the checkboxes for time log items and updates the running total in a DIV. */
  var total = 0;
  jQuery(".timeLogItem").click(function () {
    var amount = jQuery(this).data("amount");
    if (this.checked)
    { total += amount; }
    else
    { total -= amount; }
    jQuery('#divTotalAmount').html(total).formatCurrency();
  });
}

どちらの機能もドキュメント対応です。どうすればこれを達成できますか教えてください。

よろしくアビシェーク

4

3 に答える 3

0

以下のコードスニペットで試してください..

JS

$(document).ready(function () {
    $(".chkSelectAllTimeLogs").click(function () {
        $('.timeLogItem').each(function () {
            if ($(".chkSelectAllTimeLogs").is(':checked') == true) {
                $(this).attr('checked', 'checked');
            }
            else {
                $(this).removeAttr('checked');
            }
        });

        CountValueofCheckedchk();
    });

    $(".timeLogItem").click(function () {
        var totalchk = $('.timeLogItem').length;
        var checkedchk = $('.timeLogItem:checked').length;
        if (totalchk == checkedchk) {
            $(".chkSelectAllTimeLogs").attr('checked', 'checked');
        }
        else {
            $(".chkSelectAllTimeLogs").removeAttr('checked');
        }

        CountValueofCheckedchk();
    });
});


function CountValueofCheckedchk() {
    var total = 0;
    $('.timeLogItem').each(function () {

        if ($(this).is(':checked') == true) {
            total = total + parseInt($(this).attr('dataamount'));
        }
    });

    $('#divTotalAmount').html(total);
}

HTML (カミソリ)

<table>
<thead>
    <tr>
        <th style="text-align: center;">
            Pay?
            <input class="chkSelectAllTimeLogs" type="checkbox" />
        </th>
    </tr>
</thead>
<tbody>
    @for (int i = 0; i < 10; i++)
    {
        <tr>
            <td style="text-align: center;">
                @Html.CheckBox("CheckName", new { @class = "timeLogItem", dataamount = i })
                @i
            </td>
        </tr>
    }
</tbody>

于 2013-06-29T11:45:06.417 に答える
0

この Codepen: http://cdpn.io/EbCuxを見て、必要なものを理解しているかどうか、問題が解決されているかどうかを確認してください。

于 2013-06-29T11:30:12.650 に答える
0

以下のコードを試してください：

[jQuery の代わりに $ を使用しました]

HTML:

<input type="checkbox" class="chkSelectAllTimeLogs" value="1" />
<br/>
<br/>
<br/>
<br/>
<input type="checkbox" class="timeLogItem" value="1" />
<input type="checkbox" class="timeLogItem" value="2" />
<input type="checkbox" class="timeLogItem" value="3" />
<div id="divTotalAmount"></div>

jQuery:

var total = 0; 
$(".chkSelectAllTimeLogs").click(function () {
     if ($(this).is(':checked')) {
         $(".timeLogItem").prop("checked", true);
         ehRunningTotalForTimeLogPaymentEntry();
     } else {
         $(".timeLogItem").prop("checked", false);
     }
 });

 //For all values
 function ehRunningTotalForTimeLogPaymentEntry() {
     var ar = [];
     $('.timeLogItem:checked').each(function () {
         ar.push(parseInt($(this).val()));
     });

     for (var i = 0; i < ar.length; i++) {
         total += ar[i];
     }
     console.log(total);
     $('#divTotalAmount').text(total);
 };
//Individual checks
$(".timeLogItem").click( function() {   
    var amount = parseInt($(this).val());
    if ($(this).is(":checked"))
    { total += amount; }
    else {
        total -= amount;
    }
       $('#divTotalAmount').text(total);
  });

フィドル

于 2013-06-29T11:31:59.897 に答える