How to calculate totals in jQuery with dropdowns

Question

I am trying to get the dropdowns in the code below working like the checkboxes. The checkboxes when checked reveal a price and the revealed prices then get totaled. I also want the option selected in the dropdowns to reveal a price and be added to the total. My issue is with the coding in $('select').change(function() { Appreciate any help.

Thanks

See: https://jsfiddle.net/hcanning2012/po4189af/130/

HTML

<table width="100%">
<tr> 
  <td>
    <label>
      <input type="checkbox" name="colorCheckbox" value="n1"> Show Price
    </label>
  </td>
  <td>
    <div class="n1 box">200</div>
  </td>
</tr>

<tr> 
  <td>
    <label>
      <input type="checkbox" name="colorCheckbox" value="n2"> Show Price
    </label>
  </td>
  <td>
    <div class="n2 box">200</div>
  </td>
</tr>

<tr> 
  <td>
    <label>
      <input type="checkbox" name="colorCheckbox" value="n3"> Show Price
    </label>
  </td>
  <td>
    <div class="n3 box">200</div>
  </td>
</tr>

<tr> 
  <td>
    <label>
    <select value="n4" id="n4">
        <option value="0" selected>Choose...</option>
        <option value="10">item 1</option>
        <option value="20">item 2</option>
   </select>
  </td>
  <td>
    <div class="n4"></div>
  </td>
</tr>


<tr> 
  <td>
    <label>
    <select value="n5" id="n5">
        <option value="0" selected>Choose...</option>
        <option value="3">item 1</option>
        <option value="4">item 2</option>
   </select>
  </td>
  <td>
    <div class="n5"></div>
  </td>
</tr>



<tr> 
<td > Total: </td><td><div id="sum">0</div></td>
</tr>

CSS

.box {
  display: none;
}

jQuery

$(document).ready(function() {
var sum = 0;
  $('input[type="checkbox"]').change(function() {
    var inputValue = $(this).attr("value");

   if(this.checked) {
       sum = parseInt(sum) + parseInt($("." + inputValue).text());
   }else {
       sum = parseInt(sum) - parseInt($("." + inputValue).text());
    }
    $("#sum").text(sum);

    $("." + inputValue).toggle();
  });


  $('select').change(function() {
      var selectValue = $(this).attr("value");
      var optionValue = (this.value);
      $("." + selectValue).text(optionValue);
      
      
       if('option:selected',this) {
       sum = parseInt(sum) + parseInt($("." + selectValue).text());
       
   }else {
       sum = parseInt($("." + selectValue).text());
    }
      
      $("#sum").text(sum);
    });
    
});

Thanks

fortunately you'll need to use javascript to do things like adding up values, as jQuery has no plugin for that — Bravo, Aug 12 '21 at 15:12
Ok thanks. The checkbox specific values total fine right now, it's just the dropdown values that's causing me the headscratcher. — , Aug 12 '21 at 15:19
You have a number of typos in your fiddle - start by opening the console and checking for errors - 1) `.var()` instead of `.val()` 2) your `select` has the same class (`.n5`) as the output so get blatted 3) .var(text) -> .val(text) — freedomn-m, Aug 12 '21 at 15:28
Thanks for spotting those errors. I'm 90% there now at https://jsfiddle.net/hcanning2012/po4189af/130/ . Only issue is if I click between options on the dropdowns a few times the total is off. Something with the sum calc. — , Aug 12 '21 at 15:53
I recommend that you have a separate `function calc()` that returns the sum (or also updates #sum). Within that, read the values as needed (from the checked checkboxes/selected options). This way your "running total" using +/- sum won't ever get out of sync. — freedomn-m, Aug 12 '21 at 16:17
Unlike with the uncheck checkbox code the else statement under the select function doesn't seem to ever get called `else { sum = parseInt(sum) - parseInt($("." + selectValue).text());}` so the subtraction never occurs. Wonder how to fix that. — , Aug 12 '21 at 17:08
The `select` change event occurs only once, so you don't get an event for "unselected" - only that the next one is selected. — freedomn-m, Aug 12 '21 at 18:42

Twisty · Accepted Answer · 2021-08-12T17:53:28.223

Consider the following.

Fiddle: https://jsfiddle.net/Twisty/hpd415fj/46/

HTML

<table width="100%">
  <tr>
    <td>
      <label>
        <input type="checkbox" name="colorCheckbox" id="n1" value="200" data-rel="div.n1"> Show Price
      </label>
    </td>
    <td>
      <div class="n1 box">200</div>
    </td>
  </tr>

  <tr>
    <td>
      <label>
        <input type="checkbox" name="colorCheckbox" id="n2" value="200" data-rel="div.n2"> Show Price
      </label>
    </td>
    <td>
      <div class="n2 box">200</div>
    </td>
  </tr>

  <tr>
    <td>
      <label>
        <input type="checkbox" name="colorCheckbox" id="n3" value="200" data-rel="div.n3"> Show Price
      </label>
    </td>
    <td>
      <div class="n3 box">200</div>
    </td>
  </tr>

  <tr>
    <td>
      <label>
        <select id="n4" data-rel="div.n4">
          <option value="0" selected>Choose...</option>
          <option value="10">item 1</option>
          <option value="20">item 2</option>
        </select>
      </label>
    </td>
    <td>
      <div class="n4"></div>
    </td>
  </tr>

  <tr>
    <td>
      <label>
        <select id="n5" data-rel="div.n5">
          <option value="0" selected>Choose...</option>
          <option value="3">item 1</option>
          <option value="4">item 2</option>
        </select>
      </label>
    </td>
    <td>
      <div class="n5"></div>
    </td>
  </tr>

  <tr>
    <td> Total: </td>
    <td>
      <div id="sum">0</div>
    </td>
  </tr>
</table>

JavaScript

$(function() {
  function getTotal() {
    var total = 0;
    $("input, select").each(function(i, el) {
      if ($(el).is("input:checked")) {
        $($(el).data("rel")).show();
        total += parseInt($(el).val());
      } else {
        $($(el).data("rel")).hide();
      }
      if ($(el).is("select")) {
        if ($(el).val() !== "0") {
          $($(el).data("rel")).html($(el).val()).show();
          total += parseInt($(el).val());
        } else {
          $($(el).data("rel")).html($(el).val()).hide();
        }
      }
    });
    return total;
  }

  $('input[type="checkbox"], select').change(function() {
    $("#sum").text(getTotal());
  });
});

This loops over each element and checks it's status. You will noticed I cleaned up your HTML so it is more easily used.

I added an ID attribute, changed the Value, and added data attributes. This allows the script to gather all the details needed. You can loop over each and if is checked or selected, you can add it into the total.

It can also hide/show the relative elements.

@McHunkerson I am glad it helped. I had updated that but it didn't get saved in my fiddle. I have updated the answer. If it answers your question, please mark it as the answer. Feel free to upvote if you want too. — Twisty, Aug 12 '21 at 17:55
I don't have the reputation score to upvote but absolutely set it as right answer. I envy your coding knowledge! Is it easy to append a $ to the front of these values and a thousand comma separator so I could get values like $1,200 etc... if needed? Thanks again! — , Aug 12 '21 at 18:03
https://stackoverflow.com/questions/149055/how-to-format-numbers-as-currency-strings — freedomn-m, Aug 12 '21 at 18:40

How to calculate totals in jQuery with dropdowns

1 Answers1

Linked