JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<ul class="ac-custom">
  <h4>Чекбокс 1</h4>
  <li><input type="checkbox" name="checkbox1" id="checkbox1" value="1">
    <label for="checkbox1"><span>Прибавить? <strong>+50</strong> руб</span></label>
  </li>
</ul>

<br />

<ul class="ac-custom">
  <h4>Чекбокс 1</h4>
  <li><input type="checkbox" name="checkbox2" id="checkbox2" value="1">
    <label for="checkbox2"><span>Прибавить? <strong>+50</strong> руб</span></label>
  </li>
</ul>

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

JavaScript

jQuery(document).ready(function() {
  const price = 200;

  //если галочка стоит, то выводим цену, если нет то 0
  function checkbox1() {
    if ($('#checkbox1').is(':checked')) {
      const checkbox1 = 50;
    } else {
      const checkbox1 = 0;
    }
  }
  //запускаем функцию при клике
  $('#checkbox1').click(function() {
    checkbox1();
  });
  //запускаем функцию при загрузки страницы
  $(document).ready(function() {
    checkbox1();
  });

  //если галочка стоит, то выводим цену, если нет то 0
  function checkbox2() {
    if ($('#checkbox2').is(':checked')) {
      const checkbox2 = 50;
    } else {
      const checkbox2 = 0;
    }
  }
  //запускаем функцию при клике
  $('#checkbox2').click(function() {
    checkbox2();
  });
  //запускаем функцию при загрузки страницы
  $(document).ready(function() {
    checkbox2();
  });

  //плюсуем суммы и выводим
  let rezult = (Number(priceKbm) + Number(checkbox1) + Number(checkbox2)).toString();
  $('#sum').html(rezult);

});