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" class="checkbox" data-price="50" checked="checked">
    <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" class="checkbox" data-price="50">
    <label for="checkbox2"><span>Прибавить? <strong>+50</strong> руб</span></label>
  </li>
</ul>

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

JavaScript

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

  $('.checkbox').change(function() {
    var checkboxesPrice = $('.checkbox:checked')
      .toArray()
      .reduce(function(result, checkbox) {
        return result + parseFloat($(checkbox).data('price'))
      }, 0);

    $('#sum').html(price + checkboxesPrice);
  });

  $(document).ready(function() {
    $('.checkbox').trigger('change');
  });
});