javascript - 如何将复选框与 jquery 一起使用来获取打印值？

Question

当我单击复选框时，我希望将价格值添加到 #totalPrices id 元素中，但我的代码不起作用。

这是一张图片，向您展示它的样子:

<form action="addServicesRequest.php" method="POST">
        <div class="container form-control">
            <h5>Ajoutez des services à votre réservation :</h5>
        <?php while($services = $getServices->fetch()){ ?>
        <div class="text-center">
            <input type="checkbox" name="service" value="<?=$services['price']?>">
            <label><?= $services['service']; ?></label>
            <strong class="priceOfService"><?= $services['price']; ?>€</strong><br>
        </div>
        <hr>
    <?php } ?>

        <div>
            <p>Prix de la réservation : <strong>X€</strong></p>
            <p>Prix des services : <strong id="priceServices">X€</strong></p>
            <h4>Total : <strong id="totalPrices">X€</strong></h4>
            <input type="submit" value="Valider" class="btn btn-dark btn-sm container">
        </div>
        </div>

    </form>

这是 jquery :

var result = 0;
  var countChecked = function() {

  var n = $( "input:checked" ).val();
  $( "#totalPrices" ).text(result = result + n);
};
countChecked();

$( "input[type=checkbox]" ).on( "click", countChecked );

Answer 1

.val()方法返回一个字符串，因此必须解析返回值才能进行算术运算，还需要循环遍历选中的复选框来计算当前复选框的总和，因此您可以使用 each() ，例如:

var countChecked = function() {
  var result = 0;

  $("input[type=checkbox]:checked").each(function() {
    result += parseInt($(this).val());
  })

  $("#totalPrices").text(result);
};

countChecked();

$("input[type=checkbox]").on("click", countChecked);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="addServicesRequest.php" method="POST">
  <div class="container form-control">
    <h5>Ajoutez des services à votre réservation :</h5>

    <div class="text-center">
      <input type="checkbox" name="service" value="10">
      <label>service</label>
      <strong class="priceOfService">10 €</strong><br>
    </div>

    <div class="text-center">
      <input type="checkbox" name="service" value="20">
      <label>service</label>
      <strong class="priceOfService">20 €</strong><br>
    </div>

    <hr>
    <div>
      <p>Prix de la réservation : <strong>X€</strong>
       Prix des services : <strong id="priceServices">X€</strong></p>
      <h4>Total : <strong id="totalPrices">X€</strong></h4>
      <input type="button" value="Valider" class="btn btn-dark btn-sm container">
    </div>
  </div>

</form>