Get value from checkbox with js and jquery

Question

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="./script.js"></script>
</head>
<body>
    <span id="totalPrice">Value</span>
    <span id="productId1">1000</span>
    <span id="productId2">2222</span>
    <span id="productId3">2222</span>
    <input type="checkbox" value="1"/>
    <input type="checkbox" value="2"/>
    <input type="checkbox" value="3"/>
    <input type="button" id="addButton" value="Add"/>
</body>
</html>

If I click on the checkbox, then I get its value and concatenate. As a result, I get the id for the span from which I want to take the value and sum it up. After that, display the entire amount in span

this is my js code:

$(function(){
  
  var totalPrice = $('#totalPrice');
  var boxes = $('input[type=checkbox]')
  var totalPriceNow = 0;

    boxes.click(function() {
      totalPriceNow = 0;
      boxes.each(function() {
        if (this.checked) {
          var productId = 'productId';
          productId += this.value;
          var productPrice = $('#' + 'productId').text();
          totalPriceNow += parseInt(productPrice);
        }
      });

      totalPrice.text(totalPriceNow);
  });
})

SO is not a coding service... Contributors expect an attempt from you about which it is possible to give explanations why your attempt failed. — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Jan 22, 2021 at 0:19

Swati · Accepted Answer · 2021-01-22 04:09:22Z

Whenever any checkbox is change you can loop through all checkboxes which is checked and add your sum to some variable and finally add this value to your totalPrice.

Demo Code :

$('input[type=checkbox]').change(function() {
  var totalPriceNow = 0;
  //loop through checked checkboxes
  $('input[type=checkbox]:checked').each(function() {
    var productId = 'productId' + this.value;
    totalPriceNow += parseInt($('#' + productId).text().trim()); //get text
  })
  $('#totalPrice').text(totalPriceNow);
});

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<span id="totalPrice">Value</span>
<span id="productId1">1000</span>
<span id="productId2">2222</span>
<span id="productId3">2222</span>
<input type="checkbox" value="1" />
<input type="checkbox" value="2" />
<input type="checkbox" value="3" />
<input type="button" id="addButton" value="Add" />

lifeiscontent · Accepted Answer · 2021-01-22 00:41:46Z

// listen for change event on any "selected" checkbox
  $(document).on('change', '[name="selected"]', function () {
    // get selected checkbox values as array of numbers
    var selectedValues = $('[name="selected"]:checked').map(function () {
      // convert value from string to number
      return Number($(this).val());
    }).get();
    
    // add prices together to get total price
    var totalPrice = selectedValues.reduce(function (total, price) {
      return total + price;
    }, 0);
    
    $('#totalPrice').html(totalPrice);
  })

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <span id="totalPrice">0</span>
    <input type="checkbox" name="selected" value="1">
    <input type="checkbox" name="selected" value="2">
    <input type="checkbox" name="selected" value="3">
</body>
</html>

Collectives™ on Stack Overflow

Get value from checkbox with js and jquery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related