CODEWITHSUNDEEP
javascriptphpjquery
pandaD
pandaD

Reputation: 103

How can I use checkboxes with jquery to get an print a value?

When I click on a checkbox, I want the price value to be added in the #totalPrices id element, but my code doesn't work.

Here's a picture to show you what it looks like:

enter image description here

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

Here's the jquery :

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

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

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

Upvotes: 2

Views: 59

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

The .val() method returns a string so you must parse the returned value then you can perform arithmetic operations, also you need to loop through the checked checkboxes to calculate the total of the current ones, so you could use each() like:

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>

Upvotes: 3

Taplar
Taplar

Reputation: 24965

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();

Upvotes: 1

Related Questions