JSFiddle - React, Tailwind, and code Playground

by hcanning2012

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<div>
  <label><input type="checkbox" name="colorCheckbox" value="n1"> num 1</label>
  <label><input type="checkbox" name="colorCheckbox" value="n2"> num 2</label>
  <label><input type="checkbox" name="colorCheckbox" value="n3"> num 3</label>
</div>
<div class="n1 box">55000</div>
<div class="n2 box"></div>
<div class="n3 box">300</div>
<div id="sum"></div>

CSS

.box {
  display: none;
}

JavaScript

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