Question

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

这是我的复选框的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);
    });
});

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

我已将类数量添加到必须触发总更改的输入字段

复选框中的值不会添加

1 个答案: