Question

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

<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.应相应地计算数据量中的值，即在检查和取消选中单个或多个点击时。

目前我有两个独立的功能，如下：

标记我所拥有的支票：

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();
  });
}

两个功能都在文档准备好了。请让我知道如何实现这一目标？

此致阿布舍克巴克

Answer 1

看看这个Codepen：http://cdpn.io/EbCux，看看我是否理解了你需要的东西，以及它是否解决了你的问题。

Answer 2

尝试以下代码：

[我用过$而不是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);
  });

Fiddle

Answer 3

请尝试使用以下代码段..

<强> 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（RAZOR）

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

选中取消选中所有复选框并使用数据属性计算值

3 个答案: