0

我想检查所有检查牛并计算数据属性中包含的值：-

<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

看看这个 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 回答
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 回答