JSFiddle - React, Tailwind, and code Playground

by derzaiii

HTML

<label>
  <input type="checkbox" class="my-checkbox" name="checkbox_extra_service_page" value="Текст 1">
  <div class="extra_service_page active" data-price="1">
    <div class="discount_extra_service">Текст 1</div>
  </div>
</label>
<label>
  <input type="checkbox" class="my-checkbox" name="checkbox_extra_service_page" value="Текст 2">
  <div class="extra_service_page active" data-price="2">
    <div class="discount_extra_service">Текст 2</div>
  </div>
</label>
<label>
  <input type="checkbox" class="my-checkbox" name="checkbox_extra_service_page" value="Текст 3">
  <div class="extra_service_page " data-price="3">
    <div class="discount_extra_service">Текст 3</div>
  </div>
</label>
<br/>
<input id="extra_service_page" type="text" value="" name="id_extra_service_page">
<div class="total_this">Сумма
  <span class="sum_all">0</span>
  <span>руб.</span>
</div>

CSS

label {
  display: inline-block;
  text-align: center;
  font-size: 13px;
  width: 30%;
}

#extra_service_page {
  margin-top: 10px;
  width: 100%;
}

JavaScript

var $text = $('#extra_service_page'),
  $box = $('.my-checkbox');

$box.on('click change', function() {
  var values = [];

  $box.filter(':checked').each(function() {
    values.push(this.value);
  });

  $text.val(values.join(','));
});