JSFiddle - React, Tailwind, and code Playground

by Roman Babadjanyan

HTML

<div class="field-checkbox-group" id="input_checkbox-61" data-name="Поле с галочкой" data-checkboxes="400">

  <div class="field-body__item" data-checkbox="0">
    <input name="input_checkbox-61" id="input_checkbox-61-0-des" class="dop_tmpl" type="checkbox" data-value_on="44" data-value_off="0" checked="checked">
    <label for="input_checkbox-61-0-des"></label>
    <div class="option-label medium-editor-element" data-source="other" data-change="option-input_checkbox-61-0" data-canedit="true" contenteditable="true" spellcheck="false" data-medium-editor-element="true" role="textbox" aria-multiline="true" data-medium-editor-editor-index="10"
    medium-editor-index="c2c902c8-8aed-53b7-ad10-cd91a861a847" data-placeholder="">Первый показатель:</div>
  </div>

  <div class="field-body__item" data-checkbox="1">
    <input name="input_checkbox-61" id="input_checkbox-61-1-des" class="dop_tmpl" type="checkbox" data-value_on="55" data-value_off="0">
    <label for="input_checkbox-61-1-des"></label>
    <div class="option-label medium-editor-element" data-source="other" data-change="option-input_checkbox-61-1" data-canedit="true" contenteditable="true" spellcheck="false" data-medium-editor-element="true" role="textbox" aria-multiline="true" data-medium-editor-editor-index="11"
    medium-editor-index="4e483000-7ee1-aefd-7d72-1d10c3f14b14" data-placeholder="">Второй показатель:</div>
  </div>

  <div class="field-body__item" data-checkbox="2">
    <input name="input_checkbox-61" id="input_checkbox-61-2-des" class="dop_tmpl" type="checkbox" data-value_on="66" data-value_off="0">
    <label for="input_checkbox-61-2-des"></label>
    <div class="option-label medium-editor-element" data-source="other" data-change="option-input_checkbox-61-2" data-canedit="true" contenteditable="true" spellcheck="false" data-medium-editor-element="true" role="textbox" aria-multiline="true" data-medium-editor-editor-index="12"
    medium-editor-index="c56cb576-1dd3-793c-5ba7-7fe0dfeddba5"...

CSS

#box22 {
  text-align: center;
  border: 2px solid rgba();
  width: 50px;
  height: 40px;
  margin-top: 10px;
  color: blue;
}

JavaScript

$(document).ready(function() {
  $(".dop_tmpl").click(function() {
    var sum = 0; // начальное значение можно указать любое
    $('#input_checkbox-61 .field-body__item :checked').is(function() { // Вместо .each можно .is()
      sum += parseInt($(this).attr("data-value_on")); //Вместо .attr можно .val()
    });

    $({
      numberValue: 0
    }).animate({
      numberValue: sum
    }, {
      duration: 300, // Скорость анимации, где 500 = 0,5 одной секунды, то есть 500 миллисекунд
      step: function(val) {
          $("#box22").html(Math.ceil(val));
        } // Блок, где необходимо сделать анимаци 
    });
    $('#box22').text(sum);
  });
});