复选框中的值不会添加

values in a checkbox won't add

本文关键字：添加 复选框      更新时间：2023-09-26

我有 23 个checkboxes .它们中的每一个都有一个值。当用户选中该复选框时，其值将添加到总计中，并显示在文本框中。如果未选中，则不会添加它。 我的问题是，它没有添加。它仅显示上次选中的复选框的值。如何添加所有选中的值？

这是我的复选框的 jQuery。

function tblcheckboxes(cb){
    var a=0;
    var total = 0;
    if (cb.is(":checked")) {
        a = parseFloat(cb.val(), 10);
        total += a;
    }else{
        total -= a;
    }$('.txt7').val(total.toFixed(2)); 
}
$(document).ready(function(){
    $('[id^="tcbx"]').click(function(){
        var cb = $(this);
        tblcheckboxes(cb);
        grandtotal(cb);
    });
});

您需要将 total 的值设置为 total 元素的值

function tblcheckboxes(cb) {
  var total = 0;
  $('input.amount').filter(':checked').each(function() {
    total += (+this.value || 0);
  });
  $('.txt7').val(total.toFixed(2));
}
$(document).ready(function() {
  $('input.amount').click(function() {
    var cb = $(this);
    tblcheckboxes(cb);
    grandtotal(cb);
  });
});
function ChangeColColor() {}
function grandtotal() {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="tblPackage">
  <thead>
    <tr style="text-align: center;">
      <td width="30%"></td>
      <td width="1%"></td>
      <td width="19%" valign="top">
        <div class="d17_1">
          <div class="d17_2">ECONOMY</div><span class="s11">$49</span>
        </div>
      </td>
      <td width="19%" valign="top">
        <div class="d17_1">
          <div class="d17_2">DELUXE</div><span class="s11">$79</span>
        </div>
      </td>
      <td width="19%" valign="top">
        <div class="d17_1">
          <div class="d17_2">ULTIMATE</div><span class="s11">$149</span>
        </div>
      </td>
    </tr>
  </thead>
  <tbody>
    <colgroup>
      <col id="colA" />
      <col id="colB" />
      <col id="colC" />
      <col id="colD" />
      <col id="colE" />
    </colgroup>
    <tr>
      <td style="text-align: left;">
        <h5>Choose Package</h5>
      </td>
      <td></td>
      <td>
        <center>
          <input type="radio" name="radiog_dark" checked value="49.00" id="tcbx1" class="css-checkbox amount" data-col="colC" onclick="ChangeColColor(this,'colC')" />
          <label for="tcbx1" class="css-label"></label>
        </center>
      </td>
      <td>
        <center>
          <input type="radio" name="radiog_dark" value="79.00" id="tcbx2" class="css-checkbox amount" data-col="colD" onclick="ChangeColColor(this,'colD')" />
          <label for="tcbx2" class="css-label"></label>
        </center>
      </td>
      <td>
        <center>
          <input type="radio" name="radiog_dark" value="149.00" id="tcbx3" class="css-checkbox amount" data-col="colE" onclick="ChangeColColor(this,'colE')" />
          <label for="tcbx3" class="css-label"></label>
        </center>
      </td>
    </tr>
    <tr>
      <td>
      </td>
      <td style="text-align: center;">
        <input type="checkbox" name="radiog_dark" id="tcbx" class="css-checkbox amount" />
        <label for="tcbx" class="css-label"></label>
      </td>
      <td valign="top" style="text-align: center;">
        <input type="checkbox" disabled checked name="radiog_dark" id="tcbx1" class="css-checkbox" />
        <label for="tcbx1" class="css-label"></label>
      </td>
      <td valign="top" style="text-align: center;">
        <input type="checkbox" disabled checked name="radiog_dark" id="tcbx2" class="css-checkbox" />
        <label for="tcbx2" class="css-label"></label>
      </td>
      <td valign="top" style="text-align: center;">
        <input type="checkbox" disabled checked name="radiog_dark" id="tcbx3" class="css-checkbox" />
        <label for="tcbx3" class="css-label"></label>
      </td>
    </tr>
    <tr>
      <td width="30%">
        <lbl id="lblBtn" />
      </td>
      <td style="text-align: center;">
        <input type="checkbox" name="radiog_dark" id="tcbx4" value="19.00" class="css-checkbox amount" />
        <label for="tcbx4" class="css-label"></label>
      </td>
      <td valign="top" style="text-align: center;">
        <input type="checkbox" disabled checked name="radiog_dark" id="tcbx1" class="css-checkbox" />
        <label for="tcbx1" class="css-label"></label>
      </td>
      <td valign="top" style="text-align: center;">
        <input type="checkbox" disabled checked name="radiog_dark" id="tcbx2" class="css-checkbox" />
        <label for="tcbx2" class="css-label"></label>
      </td>
      <td valign="top" style="text-align: center;">
        <input type="checkbox" disabled checked name="radiog_dark" id="tcbx3" class="css-checkbox" />
        <label for="tcbx3" class="css-label"></label>
      </td>
    </tr>
    <tr>
      <td width="30%"></td>
      <td style="text-align: center;">
        <input type="checkbox" name="radiog_dark" id="tcbx5" value="49.00" class="css-checkbox amount" />
        <label for="tcbx5" class="css-label"></label>
      </td>
      <td valign="top" style="text-align: center;">
        <input type="checkbox" disabled checked name="radiog_dark" id="tcbx1" class="css-checkbox" />
        <label for="tcbx1" class="css-label"></label>
      </td>
      <td valign="top" style="text-align: center;">
        <input type="checkbox" disabled checked name="radiog_dark" id="tcbx2" class="css-checkbox" />
        <label for="tcbx2" class="css-label"></label>
      </td>
      <td valign="top" style="text-align: center;">
        <input type="checkbox" disabled checked name="radiog_dark" id="tcbx3" class="css-checkbox" />
        <label for="tcbx3" class="css-label"></label>
      </td>
    </tr>
    <tr>
      <td width="30%"></td>
      <td style="text-align: center;">
        <input type="checkbox" name="radiog_dark" id="tcbx6" value="75.00" class="css-checkbox amount" />
        <label for="tcbx6" class="css-label"></label>
      </td>
      <td valign="top" style="text-align: center;">
        <input type="checkbox" checked name="radiog_dark" id="tcbx1" class="css-checkbox" />
        <label for="tcbx1" class="css-label"></label>
      </td>
      <td valign="top" style="text-align: center;">
        <input type="checkbox" disabled checked name="radiog_dark" id="tcbx2" class="css-checkbox" />
        <label for="tcbx2" class="css-label"></label>
      </td>
      <td valign="top" style="text-align: center;">
        <input type="checkbox" disabled checked name="radiog_dark" id="tcbx3" class="css-checkbox" />
        <label for="tcbx3" class="css-label"></label>
      </td>
    </tr>
    <tr>
    </tr>
  </tbody>
</table>
Total:
<input type="text" class="txt7" />

我已经向这些输入字段添加了类数量，该输入字段必须触发总更改

相关文章：