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

});