JSFiddle - React, Tailwind, and code Playground

by Twisty

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>

CSS

.box {
  display: none;
}

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());
        }
      }
    });
    return total;
  }

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