重复复选框表行并对每个选中的javascript的值求和

Question

我正在处理这张桌子。

当您选中每个表上的复选框时，它会添加到下面指定的另一个表中，但是要对每个选中的复选框的值求和是问题，因为如果我选中一个复选框，它将对错误的值求和并显示，如果我取消选中并再次检查，它仍然会添加到总数中，而不会从总数中删除先前的未选中值，但是添加到下面的另一个表中工作正常，它只是给出问题的总值的总和

下面是我的html表格

<table class="table table-hover">
    <thead style="background-color: rgb(25, 96, 143); color: #fff;" id="feesTbl">
        <tr>
            <th></th>
            <th>Fee Name</th>
            <th>Fee Amount</th>
        </tr>
    </thead>

    <tbody>
        <form method="post" action="">
            <tr data-index="1">
                <td>
                    <input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
                </td>
                <td>
                    CAC Fine Fees
                </td>
                <td>
                    10000
                </td>
            </tr>
            <tr data-index="2">
                <td>
                    <input type="checkbox" class="checky" name="feeids" value="100000" data-check-name="PowerHouse Water Cooper">
                </td>
                <td>
                    PowerHouse Water Cooper
                </td>
                <td>
                    100000
                </td>
            </tr>
            <tr data-index="3">
                <td>
                    <input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
                </td>
                <td>
                    CAC Fine Fees
                </td>

                <td>
                    10000
                </td>
            </tr>
            <tr data-index="4">
                <td>
                    <input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
                </td>
                <td>
                    CAC Fine Fees
                </td>
                <td>
                    10000
                </td>
            </tr>
            <tr data-index="5">
                <td>
                    <input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
                </td>
                <td>
                    CAC Fine Fees
                </td>
                <td>
                    10000
                </td>
            </tr>
        </form>
    </tbody>
</table>
<div id="showTotal">
    <form action="" method="POST">
        <input type="text" id="total" class="form-control" />
    </form>
</div>
<table id="tbl2">

</table>

下面是jquery代码

// $("#showTotal").hide();
var total = 0;
var $checky = $("input[type=checkbox].checky");

$checky.click(function() {
    //calculateTotal();
    if ($(this).is(":checked")) {
        calculateTotal();
        $(this).closest("tr").clone().appendTo("#tbl2");
    } else {
        var index = $(this).closest("tr").attr("data-index");
        var findRow = $("#tbl2 tr[data-index='" + index + "']");
        findRow.remove();
    }
});

function calculateTotal() {
    //if($(this).is(":checked")) {
    $checky.each(function() {
        total = parseFloat(total) + parseFloat($(this).val());
        // if(total != 0) {
        //     $("#showTotal").show();
        // }else {
        //     $("#showTotal").hide();
        // }
        $("#total").val("N" + total);
    });
    //}
}

Answer 1

这是你想要的吗？

我有一些你的 jquery。

function calculateTotal() {
  //if($(this).is(":checked")) {
  var total = 0;

  $checky.filter(":checked").each(function() {
    total = parseFloat(total) + parseFloat($(this).val());
    // if(total != 0) {
    //     $("#showTotal").show();
    // }else {
    //     $("#showTotal").hide();
    // }
  });
  $("#total").val("N" + total);
}

演示

// $("#showTotal").hide();

var $checky = $("input[type=checkbox].checky");
$checky.click(function() {
  //calculateTotal();
  if ($(this).is(":checked")) {
    calculateTotal();
    $(this).closest("tr").clone().appendTo("#tbl2");


  } else {
    var index = $(this).closest("tr").attr("data-index");
    var findRow = $("#tbl2 tr[data-index='" + index + "']");
    calculateTotal();
    findRow.remove();
  }
});

function calculateTotal() {
  //if($(this).is(":checked")) {
  var total = 0;

  $checky.filter(":checked").each(function() {
    total = parseFloat(total) + parseFloat($(this).val());
    // if(total != 0) {
    //     $("#showTotal").show();
    // }else {
    //     $("#showTotal").hide();
    // }
  });
  $("#total").val("N" + total);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover">
  <thead style="background-color: rgb(25, 96, 143); color: #fff;" id="feesTbl">
    <tr>
      <th></th>
      <th>Fee Name</th>
      <th>Fee Amount</th>
    </tr>
  </thead>

  <tbody>
    <form method="post" action="">
      <tr data-index="1">
        <td>
          <input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
        </td>
        <td>
          CAC Fine Fees
        </td>
        <td>
          10000
        </td>
      </tr>
      <tr data-index="2">
        <td>
          <input type="checkbox" class="checky" name="feeids" value="100000" data-check-name="PowerHouse Water Cooper">
        </td>
        <td>
          PowerHouse Water Cooper
        </td>
        <td>
          100000
        </td>
      </tr>
      <tr data-index="3">
        <td>
          <input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
        </td>
        <td>
          CAC Fine Fees
        </td>

        <td>
          10000
        </td>
      </tr>
      <tr data-index="4">
        <td>
          <input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
        </td>
        <td>
          CAC Fine Fees
        </td>
        <td>
          10000
        </td>
      </tr>
      <tr data-index="5">
        <td>
          <input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
        </td>
        <td>
          CAC Fine Fees
        </td>
        <td>
          10000
        </td>
      </tr>
    </form>
  </tbody>
</table>
<div id="showTotal">
  <form action="" method="POST">
    <input type="text" id="total" class="form-control" />
  </form>
</div>
<table id="tbl2">

</table>