Форум

EvgenyJS · #1 (**permalink**) 24.02.2018, 19:50

Есть блок с ценой

<div class="product-item-detail-price-current">177 руб.</div>

Нужно к этому числу прибавить значение в зависимости от выбранного варианта в чекбоксе и отнять значение, если галочка снялась

<div class="checkbox">                                                                                                                      
    <p>
        <input id="24684" type="checkbox" name="dop_services" value="500">
    <label for="24684">Дополнительный экземпляр отчета</label>
    </p>                                                                                                                            
    <p>
    <input id="24685" type="checkbox" name="dop_services" value="200">
    <label for="24685">Электронная версия отчета (с ЭЦП оценщика)</label>
    </p> 
</div>

Нашел скрипт, пытался переделать под себя - не получается.

var boxes = $("input:checkbox");
    $("input:checkbox").on("change", function(){
      var theArray = new Array();
      for (var i=0;i<boxes.length;i++) {
       var box = boxes[i]; 
       if ($(box).prop('checked')) {
          theArray[theArray.length] = $(box).val();
       }
    }
      showValues(theArray);
    });
 
    var showValues = function(array) {
      var oldPriceText = $('.product-item-detail-info-container .product-item-detail-price-current').text();
      oldPrice = Number(oldPriceText.replace(/\D+/g,""));
      var text = "";
      if(array.length == 0) text += "Ни один чекбокс не выбран";
      for(var i = 0; i < array.length; i++) {
         text += "Чекбокс "+array[i]+" выбран!<br />";
         $('.product-item-detail-price-current').text(oldPrice+parseFloat(array[i])+' руб.');
       }
      $(".values").html(text);
    }

рони · #2 (**permalink**) 24.02.2018, 20:20

EvgenyJS,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
  $(".checkbox").on("click", function(e) {
    var sum = [].reduce.call(this.querySelectorAll(":checked"), function(sum, el) {
      return +el.value + sum;
    }, 177);
    $(".product-item-detail-price-current").html(sum + " руб.");
  });
});
  </script>
</head>

<body>
<div class="product-item-detail-price-current" data-price="177">177 руб.</div>
<div class="checkbox">
    <p>
    <input id="24684" type="checkbox" name="dop_services" value="500">
    <label for="24684">Дополнительный экземпляр отчета</label>
    </p>
    <p>
    <input id="24685" type="checkbox" name="dop_services" value="200">
    <label for="24685">Электронная версия отчета (с ЭЦП оценщика)</label>
    </p>
</div>

</body>
</html>

EvgenyJS · #3 (**permalink**) 24.02.2018, 20:50

рони,
спасибо большое!

Форум

Справочник

Discord чат

Курсы javascript