复选框计算不起作用

Checkbox calculation not working

本文关键字:不起作用 计算 复选框      更新时间:2023-09-26

$(document).ready(function() {
  $("input[type=checkbox]").on("change", function() {
    var tot = 0;
    $("input[type=checkbox]:checked").each(function() {
      tot += +(this.value);
    });
    $("#result").text("Total = " + tot);
    $('#CRCGCA').val("Total = " + tot)
  });
});
<p>Gift Certificate Amount (check one or more)
  <br />
  <span class="wpcf7-form-control-wrap GRCGA"><span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required Multiple radio-vertical" id="GRCGA"><span class="wpcf7-list-item first"><label><input type="checkbox" name="GRCGA[]" value="$10.00 Gift Card" />&nbsp;<span class="wpcf7-list-item-label">$10.00 Gift Card</span>
  </label>
  </span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$20.00 Gift Card" />&nbsp;<span class="wpcf7-list-item-label">$20.00 Gift Card</span>
  </label>
  </span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$25.00 Gift Card" />&nbsp;<span class="wpcf7-list-item-label">$25.00 Gift Card</span>
  </label>
  </span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$40.00 Gift Card" />&nbsp;<span class="wpcf7-list-item-label">$40.00 Gift Card</span>
  </label>
  </span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$100.00 Gift Card" />&nbsp;<span class="wpcf7-list-item-label">$100.00 Gift Card</span>
  </label>
  </span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$200.00 Gift Card" />&nbsp;<span class="wpcf7-list-item-label">$200.00 Gift Card</span>
  </label>
  </span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$400.00 Gift Card" />&nbsp;<span class="wpcf7-list-item-label">$400.00 Gift Card</span>
  </label>
  </span><span class="wpcf7-list-item last"><label><input type="checkbox" name="GRCGA[]" value="$500.00 Gift Card" />&nbsp;<span class="wpcf7-list-item-label">$500.00 Gift Card</span>
  </label>
  </span>
  </span>
  </span>
</p>
<p>Gift Card Amount: <span class="wpcf7-form-control-wrap CRCGCA"><input type="text" name="CRCGCA" value="" size="8" maxlength="8" class="wpcf7-form-control wpcf7-text" id="CRCGCA" aria-invalid="false" /></span>
</p>
<p id="result"></p>

我在计算复选框组的总数时遇到问题(此复选框集是多选的(可以选择一个或多个)我也想将总数复制到称为礼品卡金额的文本框中。

.HTML:

<p>
    Gift Certificate Amount (check one or more)<br />
    [checkbox* GRCGA id:GRCGA class:Multiple use_label_element class:radio-vertical "$10.00 Gift Card " "$20.00 Gift Card " "$25.00 Gift Card " "$40.00 Gift Card " "$100.00 Gift Card " "$200.00 Gift Card " "$400.00 Gift Card " "$500.00 Gift Card"] 
</p>   
Gift Card Amount: [text CRCGCA 8/8 id:CRCGCA]
<p id="result"></p>

JavaScript

$(document).ready(function() {
    $("input[type=checkbox]").on("change", function() {
        var tot = 0;
        $("input[type=checkbox]:checked").each(function() {
            tot += +(this.value);
        });
        $("#result").text("Total = " + tot);
        $('#CRCGCA').val("Total = " + tot)         
    });
});

您的复选框具有类似 $25.00 Gift Card 的值。您需要将其更改为数字,例如 25 .

如果您坚持使用当前的标记,则可以使用以下方法获得实际数字

var val = this.value.substr(1).split(' ')[0];
tot += +(val);

虽然擅长正则表达式的人可能会想出更漂亮的东西。

一种方法,使用String.prototype.match()Array.prototype.reduce()

$(document).ready(function() {
  $("input[type=checkbox]").on("change", function() {
    // concatenating a currency symbol to the result of mapping the checked checkboxes:
    var total = '$' + $('input[type="checkbox"]:checked').map(function(){
      // matching one-or-more numbers (''d+') followed by a (literal) period (''.')
      // followed by one-or-more numbers:
      var n = this.value.match(/'d+'.'d+/);
      // if there was a match (and 'n' is therefore not-null), and has a length,
      // we parseFloat that matched number string, otherwise we return 0:
      return n && n.length ? parseFloat(n[0]) : 0;
    // get() converts the 'map' into an array:
    }).get()
    // reduce() sums together the array-elements ('a + b'):
    .reduce(function (a, b) {
      return a + b;
      // '0' is the supplied starting value for reduce():
    }, 0)
    // toFixed(2) converts the number to a string, with two decimal places:
    .toFixed(2);
    $("#result").text("Total = " + total);
    $('#CRCGCA').val("Total = " + total)
  });
});

$(document).ready(function() {
  $("input[type=checkbox]").on("change", function() {
    var total = '$' + $('input[type="checkbox"]:checked').map(function(){
      var n = this.value.match(/'d+'.'d+/);
      return n && n.length ? parseFloat(n[0]) : 0;
    }).get().reduce(function (a, b) {
      return a + b;
    }, 0).toFixed(2);
    $("#result").text("Total = " + total);
    $('#CRCGCA').val("Total = " + total)
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Gift Certificate Amount (check one or more)
  <br />
  <span class="wpcf7-form-control-wrap GRCGA"><span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required Multiple radio-vertical" id="GRCGA"><span class="wpcf7-list-item first"><label><input type="checkbox" name="GRCGA[]" value="$10.00 Gift Card" />&nbsp;<span class="wpcf7-list-item-label">$10.0 Gift Card</span>
  </label>
  </span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$20.00 Gift Card" />&nbsp;<span class="wpcf7-list-item-label">$20.00 Gift Card</span>
  </label>
  </span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$25.00 Gift Card" />&nbsp;<span class="wpcf7-list-item-label">$25.00 Gift Card</span>
  </label>
  </span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$40.00 Gift Card" />&nbsp;<span class="wpcf7-list-item-label">$40.00 Gift Card</span>
  </label>
  </span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$100.00 Gift Card" />&nbsp;<span class="wpcf7-list-item-label">$100.00 Gift Card</span>
  </label>
  </span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$200.00 Gift Card" />&nbsp;<span class="wpcf7-list-item-label">$200.00 Gift Card</span>
  </label>
  </span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$400.00 Gift Card" />&nbsp;<span class="wpcf7-list-item-label">$400.00 Gift Card</span>
  </label>
  </span><span class="wpcf7-list-item last"><label><input type="checkbox" name="GRCGA[]" value="$500.00 Gift Card" />&nbsp;<span class="wpcf7-list-item-label">$500.00 Gift Card</span>
  </label>
  </span>
  </span>
  </span>
</p>
<p>Gift Card Amount: <span class="wpcf7-form-control-wrap CRCGCA"><input type="text" name="CRCGCA" value="" size="8" maxlength="8" class="wpcf7-form-control wpcf7-text" id="CRCGCA" aria-invalid="false" /></span>
</p>
<p id="result"></p>

引用:

  • JavaScript:
    • Array.prototype.reduce() .
    • JavaScript 正则表达式。
    • Number.prototype.toFixed() .
    • parseFloat() .
    • String.prototype.match() .
  • j查询:
    • get() .
    • map() .
    • text() .
    • val() .