Блог

Когда я нажимаю на флажок, я хочу, чтобы значение цены добавлялось в элемент #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 );
  

.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>  

 function countChecked () {
  // select all the checked inputs (this takes care of unselecting a checkbox too)
  // convert all their values to numbers
  // reduce their values to a single total
  var total = 0   $( "input:checked" )
    .map( function () { return parseInt( this.value ); } )
    .get().reduce( function ( total, value ) { return total   value; }, 0 );

  // update the total on the page
  $( "#totalPrices" ).text( total );
}

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