Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – JQuery CheckBoxes Price addition and deletion

$(document).ready(function(){
  $("input[type='checkbox']").click(function(){
      var priceTotal = 0;
      $("#calculator input[type='checkbox']:checked").each(function() {
          priceTotal += parseInt(this.value, 10);
      });
      $('#total').html(priceTotal);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="calculator">
      <input type="checkbox" />$29<br/>
      <input type="checkbox" />$39<br/>
      <input type="checkbox" />$49<br/>
      <input type="checkbox" />$59<br/>
    </div>
<div class="total"><span>$0</span></div>

Task: Based on the checkboxes Prices should be added in total class.

I tried this:

$(document).ready(function(){
  $("input[type='checkbox']").click(function(){
      var priceTotal = 0;
      $("#calculator input[type='checkbox']:checked").each(function() {
          priceTotal += parseInt(this.value, 10);
      });
      $('#total').html(priceTotal);
  });
});

I want when picking up the numerical values from checkboxes the currency sign should be stripped and later added.

Reason: It will be used finally in Sambhal, setting where the currency may not be a dollar in all the cases.

The best policy will be to get the currency in some data-set and then transfer it to the JQuery.

Please help me to accomplish this.

I do not want to use value inside input.

can we use this kind of HTML:

<div class="inputbox">
  <input type="checkbox" id="option1">
  <label for="option1">Services</label><span class="license_price bold">€29</span>
</div>

When checkbox ticked we can get the price of that span through class? That’s the demand actually.

Tags:

4

Answers


  1. 0

    There are severel errors:

    You didn’t have set any values to your inputs. So the value they return is just on or off.

    Set them directly as attribute.

    Then you select the output wrong. Your html total has a class, you select a id. Plus you set the html wrong.

    Take a look at this fiddle: https://jsfiddle.net/o260skn9/

    Login or Signup to reply.
  2. 0

    You have 2 problem:

    1 there is no value property on your input.

    2 you are using $('#total') and not $('.total')

    $(document).ready(function(){
  $("input[type='checkbox']").click(function(){
      var priceTotal = 0;
      $("#calculator input[type='checkbox']:checked").each(function() {
          priceTotal += parseInt(this.value, 10);
      });
      $('.total').html(priceTotal);
  });
});

    Demo

    $(document).ready(function(){
  $("input[type='checkbox']").click(function(){
      var priceTotal = 0;
      $("#calculator input[type='checkbox']:checked").each(function() {
          priceTotal += parseInt(this.value, 10);
      });
      $('.total').html(priceTotal);
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="calculator">
      <input type="checkbox" value="29" />$29<br/>
      <input type="checkbox" value="39" />$39<br/>
      <input type="checkbox" value="49" />$49<br/>
      <input type="checkbox" value="59" />$59<br/>
    </div>
<div class="total"><span>$0</span></div>
    Login or Signup to reply.
  3. 0

    Considering the html the value corresponding to the checkbox could be retrieved with .nextSibling.textContent and you need to change the total selector to .total as you have it as a class and not id:

    $(document).ready(function() {
  var originalPrice = +$('.total').html();
  $("input[type='checkbox']").click(function() {
    var priceTotal = originalPrice;
    $("#calculator input[type='checkbox']:checked").each(function() {
      priceTotal += parseInt($(this).siblings('.license_price.bold').html().replace("€", ''), 10);
    });
    $('.total').html(priceTotal);
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="calculator">
  <div class="inputbox">
    <input type="checkbox" id="option1">
    <label for="option1">Services1</label><span class="license_price bold"> €29</span>
  </div>
  <div class="inputbox">
    <input type="checkbox" id="option2">
    <label for="option2">Services2</label><span class="license_price bold"> €39</span>
  </div>
  <div class="inputbox">
    <input type="checkbox" id="option3">
    <label for="option3">Services3</label><span class="license_price bold"> €49</span>
  </div>
  <div class="inputbox">
    <input type="checkbox" id="option4">
    <label for="option4">Services4</label><span class="license_price bold"> €59</span>
  </div>
</div>
<span>$<span class="total">56</span></span>
    Login or Signup to reply.
  4. 0 
    i have fixed your code..
the best way is if you value take from html that's not a good way.
the better is you should use value attribute.
it's just a suggestion 

    $(document).ready(function(){
  $("input[type='checkbox']").click(function(){
      var priceTotal = 0;
      $("#calculator input[type='checkbox']:checked").each(function() {
          priceTotal += parseInt(this.value, 10);
      });
      $('#total').html(priceTotal);
  });
       

});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="calculator">
      <input type="checkbox" value="29" />$29<br/>
      <input type="checkbox" value="39" />$39<br/>
      <input type="checkbox" value="49" />$49<br/>
      <input type="checkbox" value="59" />$59<br/>
    </div>
<div class="total">$<span id="total">0</span></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search