刷新不带输入字段的新复选框使用时的javascript计算总和

在帮助下，我得到了这个脚本来更改函数的类，使其包含countable，但需要获得总计算，以更新发生更改时显示的所有字段的总和

脚本被拆分，最上面的一个集合用于计算所有可数类字段的总数，第二个脚本部分集合用于显示行项目并添加可数类

<script>
var totals=[0,0,0];
$(document).ready(function(){

    var $dataRows=$("#sum_table tr:not('.totalColumn, .titlerow')");

    $dataRows.each(function() {
        $(this).find('.countable').each(function(i){        
            totals[i]+=parseInt( $(this).html());
        });
    });
    $("#sum_table td.totalCol").each(function(i){  
        $(this).html("total:"+totals[i]);
    });

});
</script>
<script>
$(document).ready(function() {
  $("input[type=checkbox]").change(function() {
    var val = $(this).val();
    var isChecked = $(this).is(":checked");

    var $trElement = $('.' + val);
    var $tdPriceElement = $trElement.find('td.price');

    $trElement.toggle(isChecked);
    $tdPriceElement.toggleClass('countable', isChecked);
  });
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

var总计=[0,0,0]；
$（文档）.ready（函数（）{
var$dataRows=$（“#sum_table tr:not（'.totalColumn.titlerow'））；
$dataRows.each（函数（）{
$（this）.find（'.countable'）.each（函数（i）{
总计[i]+=parseInt（$（this.html（））；
});
});
$（“#sum_table td.totalCol”）。每个（函数（i）{
$（this.html（“总计：+totals[i]）；
});
});
$（文档）.ready（函数（）{
$（“输入[type=checkbox]”）。更改（函数（）{
var val=$（this.val（）；
var isChecked=$（this）.is（“：checked”）；
变量$treelement=$（'.'+val）；
var$tdPriceElement=$treelement.find（'td.price'）；
$treelement.toggle（已选中）；
$tdPriceElement.toggleClass（'countable'，已选中）；
});
});

这些复选框允许选中时显示行项目

<input class="my-activity" type="checkbox" value="42"/> example<br/>
<input class="my-activity" type="checkbox" value="43"/> example<br/>

<table id="sum_table">
<tr class="42" style="display:none">
  <td>example</td>
  <td></td>
  <td></td>
  <td class="price">7800</td>
</tr>
<tr class="43" style="display:none">
  <td>First Area</td>
  <td></td>
  <td></td>
  <td class="price">6900</td>
</tr>
<tr class="totalColumn">
    <td>Total:</td>
    <td></td>
    <td class="totalCol"></td>
</tr>
</table>

示例

示例

例子
7800
第一区
6900
总数：

您需要先加载jQuery，然后才能使用它，所以请移动：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

---

@StackSlave对我来说是非常基本的javascript，所以很粗糙。我想做的是在选中/取消选中复选框时更新total字段。除非你正在制作某种动画（这在CSS中是有争议的），否则你不需要使用jQuery。这解决了我在使用jQuery时遇到的所有问题。非常感谢@Aaron Plocharczyk

function showTotal(){
    //grab the .countable elements from the #sum_table
    var $countables =$("#sum_table .countable");

    //loop through and add up the total from their texts
    var total = 0;
    for(var i = 0; i < $countables.length; i++){
        total += Number($countables.eq(i).text());
    }

    //put the total in the .totalCol element
    $("#sum_table td.totalCol").html(total);
}

$(document).ready(function() {
  $("input[type=checkbox]").change(function() {
    var val = $(this).val();
    var isChecked = $(this).is(":checked");

    var $trElement = $('.' + val);
    var $tdPriceElement = $trElement.find('td.price');

    $trElement.toggle(isChecked);
    $tdPriceElement.toggleClass('countable', isChecked);

    //CALL IT HERE:
    showTotal();
  });
});