сброс подсчитанных значений в калькуляторе

Question

Может кто нибудь помочь? Я в js совсем не бум бум... Нужно чтобы на кнопку "сброс" вбрасывались все значения и можно было вибирать снова

// Подсчет выбранных value | чекбокс:
var count = 0;
$(function() {
    count = $('input[type=checkbox]:checked').length;
    displayCount();  

    $('input[type=checkbox]').bind('click' , function(e, a) {   
         if (this.checked) {
              count += a ? -1 : 1;
         } else {
              count += a ? 1 : -1;
         }
         
         displayCount();
    });
    $('#invert').click(function(e) {    
         $('input[type=checkbox]').trigger('click', true)
    });
});

function displayCount() {
    $('#count').text(count);
}

// Калькулятор чекбоксов:
var total = 0;

function calcItems(item) {
  var $leftBlock = $('.left');
  var val = $(item).val();
  var name = $(item).parent('label').text();
  var index = $(item).attr('data-index');

  if (item.checked) {
    total += parseInt(val);
    $leftBlock.append('<span data-index=' + index + '>' + name + '</span>');
  } else {
    total -= parseInt(val);
    $leftBlock.find('[data-index="' + index + '"]').remove();
  }

  $('#result b').text(total);

}

// Сброс чекбоксов:
$('button').click(function() {
  $('input:checked').prop('checked', false);
});

$('#btn').on('click', function() { 
      $('.clear').text("0");
      $('.calc').text("00");
      $('.clear-txt').text(""); 

      $('input[type=checkbox]')
.prop("checked", false); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text text-center pb-5">
<span class="right subheading">выбрано:</span>
<span class="countin clear" id="count"></span>
<span class="subheading">позиций</span>
<h2>ИТОГО:  <span class="calc" id="result"><b>00</b></span></h2>
<div class="price"></div>
<button class="btn btn-primary" id="btn">СБРОСИТЬ</button>
<button class="btn btn-primary modal_btn">ЗАКАЗАТЬ</button>
</div>
<div id="block">
 <div class="left clear-txt"> </div>
</div>

<ul class="accords-menu">
<li>
<div class="dropdownlink"> ДИАГНОСТИКА</div>
<ul class="submenuItems">
<table>
<thead>
<tr>
<th>УСЛУГА</th>
<th>BYN</th>
<th>ВЫБРАТЬ</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>Компьютерная диагностика</span></td>
<td>20</td>
<td><label><input type="checkbox" data-index="1" name="channelcost" value="20" onclick="calcItems(this);" /><span class="display">Компьютерная диагностика</span></label></td>
</tr>
<tr>
<td>Чтение и удаление кодов неисправностей</td>
<td>20</td>
<td><label><input type="checkbox" data-index="2" name="channelcost" onclick="calcItems(this);" value="20" /><span class="display">Чтение и удаление кодов неисправностей</span></label></td>
</tr>
</tbody>
</table>
</ul>
</li>
</li>
</ul>

Ниже код, который предложил "OPTIMUS-PRIME" он работает и всё стирает, но после того как всё стерлось основной подсчет не происходит совсем а подсчет кол-ва выбранных чекбоксов продолжает считать от последнего выбранного до сброса ...

$('#btn').on('click', function() { 
  $('.clear').text("0");
  $('.calc').text("00");
  $('.clear-txt').text(""); 

  $('input[type=checkbox]')

.prop("checked", false); });

Все подсчитаные значения нужно сбрасывать по клику на кнопку, как это сделать?

Answer 1

// Подсчет выбранных value | чекбокс:
var count = 0;
var $leftBlock = $('.left');
$(function() {
  count = $('input[type=checkbox]:checked').length;
  displayCount();

  $('input[type=checkbox]').bind('click', function(e, a) {
    if (this.checked) {
      count += a ? -1 : 1;
    } else {
      count += a ? 1 : -1;
    }

    displayCount();
  });
  $('#invert').click(function(e) {
    $('input[type=checkbox]').trigger('click', true)
  });
});

function displayCount() {
  $('#count').text(count);
}

// Калькулятор чекбоксов:
var total = 0;

function calcItems(item) {
  var val = $(item).val();
  var name = $(item).parent('label').text();
  var index = $(item).attr('data-index');

  if (item.checked) {
    total += parseInt(val);
    $leftBlock.append('<span data-index=' + index + '>' + name + '</span>');
  } else {
    total -= parseInt(val);
    $leftBlock.find('[data-index="' + index + '"]').remove();
  }

  $('#result b').text(total);

}

$('#btn').on('click', function() {
  $('input[type=checkbox]').prop("checked", false);
  $leftBlock.innerText = "";
  total = 0;
  count = 0;
  displayCount();
  $('#result b').text(total);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text text-center pb-5">
  <span class="right subheading">выбрано:</span>
  <span class="countin clear" id="count"></span>
  <span class="subheading">позиций</span>
  <h2>ИТОГО: <span class="calc" id="result"><b>00</b></span></h2>
  <div class="price"></div>
  <button class="btn btn-primary" id="btn">СБРОСИТЬ</button>
  <button class="btn btn-primary modal_btn">ЗАКАЗАТЬ</button>
</div>
<div id="block">
  <div class="left clear-txt"> </div>
</div>

<ul class="accords-menu">
  <li>
    <div class="dropdownlink"> ДИАГНОСТИКА</div>
    <ul class="submenuItems">
      <table>
        <thead>
          <tr>
            <th>УСЛУГА</th>
            <th>BYN</th>
            <th>ВЫБРАТЬ</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><span>Компьютерная диагностика</span></td>
            <td>20</td>
            <td><label><input type="checkbox" data-index="1" name="channelcost" value="20" onclick="calcItems(this);" /><span class="display">Компьютерная диагностика</span></label></td>
          </tr>
          <tr>
            <td>Чтение и удаление кодов неисправностей</td>
            <td>20</td>
            <td><label><input type="checkbox" data-index="2" name="channelcost" onclick="calcItems(this);" value="20" /><span class="display">Чтение и удаление кодов неисправностей</span></label></td>
          </tr>
        </tbody>
      </table>
    </ul>
  </li>
  </li>
</ul>

БЛОГ НА HUSL

сброс подсчитанных значений в калькуляторе

Ответы (1 шт):