JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<ul class="ac-custom">
  <li><input type="checkbox" name="priceKonder" id="priceKonder" value="600" />
    <label for="priceKonder"><span>Номер с кондиционером, +<strong>600</strong> рублей к стоимости номера.</span></label>
  </li>
</ul>

<input type="hidden" id="konderPr" name="konderPr" value="">
<input type="hidden" id="konderPr" name="konderPr" value="">
<input type="hidden" id="price" name="price" value="1000">
<input type="hidden" id="kolvoNomerBezkondeya" name="kolvoNomerBezkondeya" value="1">

<div id="blockNomerKonder" style="display:none">
    <label>Номера с кондиционером <b>*</b></label>
    <select name="nomerKonder" id="nomerKonder" class="js-select2">
      <option value="0">Выбрать</option>
      <option value="1 номер (с кондиционером)">1 номер (с кондиционером)</option>
      <option value="2 номера (с кондиционером)">2 номера (с кондиционером)</option>
      <option value="3 номера (с кондиционером)">3 номера (с кондиционером)</option>
    </select>
</div>


<br /><br />

Стоимость номера:<div id="price"></div><br />
Количество:<div id="konderKolvo"></div><br />
Результат:<div id="sum"></div><br />
Конечный результат за все:<div id="sumall"></div>

JavaScript

//запускаем весь скрипт при запуски страницы
  $(document).ready(function() {
  calc();
  });
  
  $(document).ready(function() {
    $('#priceKonder').click(function() {
      if ($(this).is(':checked')) {
        const priceKonder = $("#priceKonder").val(); // берем значение из валуе из чекбокса, сумма 600
        $('#konderPr').val(priceKonder); //если галочка стоит выводим значение
        $('#blockNomerKonder').show(100); // показываем блок
      } else {
// ПРИ СКРЫТИИ БЛОКА
        $('#konderPr').val(0); //выводим 0 если галочка не стоит
        $('#blockNomerKonder').hide(100); // скрываем блок
        $('#price').text('0'); // Обнуляем показываемую цену
 	      $('#konderKolvo').text('0'); // Обнуляем количество
      	$('#sum').text('0'); //Обнуляем показываемую суму
        $('#nomerKonder').val(0); // Меняем значение селекта на 0 "Выбрать"
        $('#sumall').html(1000);
      }
    });
  });

  function calc() {
  
  //добавил для эксперемента еще данные для подсчета
  const price = $('#price').val(); //берем цену
  const kolvoNomerBezkondeya = $('#kolvoNomerBezkondeya').val(); //берем кол-во
  //-------------

    const konderPr = $("#konderPr").val().replace(/\./, '') //берем цену за кондер из скрытого импута
    const nomerKonder = $('#nomerKonder').val().match(/\d*/)[0] //берем значение с селекта, кол-во номеров выбрали 1, 2 и т.д
    let priceKolvo = (+price * +kolvoNomerBezkondeya); 
    let rezultKonder = (+konderPr * +nomerKonder);
    let rezultall = (rezultKonder + priceKolvo).toString().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1.');

    $('#price').html(konderPr); //выводим прайс 600
    $('#konderKolvo').html(nomerKonder); // выводим кол-во
    $('#sum').html(rezultKonder); //выводим результат
    $('#sumall').html(rezultall); //выводим конечный результат всего
  }

  $('select').on('change', function() {
    calc();
  });
  //запускаем весь скрипт при запуски страницы
  $(document).ready(function() {
  calc();
  });