JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<input type="checkbox" class="checkbox1-btn" onclick="checkbox1()">
<input type="checkbox" class="checkbox2-btn" onclick="checkbox2()">

<div id="sum"></div>

JavaScript

jQuery(document).ready(function() {

  const price = 200; //default
  const checkbox1 = 50; //checkbox 1
  const checkbox2 = 50; //checkbox 2

  const checkbox1_btn = document.getElementsByClassName('checkbox1-btn'); // html checkbox element
  const checkbox2_btn = document.getElementsByClassName('checkbox2-btn'); // html checkbox element

  function checkbox11() {
    if (checkbox1_btn.checked == true) {
      let rezult = price + checkbox1;
      $('#sum').html(rezult);
    }
    if (checkbox1_btn.checked == false) {
      let rezult = price - checkbox1;
      $('#sum').html(rezult);
    }
  }

  function checkbox22() {
    if (checkbox2_btn.checked == true) {
      let rezult = price + checkbox2;
      $('#sum').html(rezult);
    }
    if (checkbox2_btn.checked == false) {
      let rezult = price - checkbox2;
      $('#sum').html(rezult);
    }
  }
});