JSFiddle - React, Tailwind, and code Playground

by Alexey Demin

HTML

<div class="order-form">
  <p>
    <input id="first" type="checkbox" name="rate" value="300" />
    <label for="first">Л.Н.Толстой "Война и мир". 300 &#8381;</label>
  </p>
  <p>
    <input id="second" type="checkbox" name="rate" value="200" />
    <label for="second">M.Ю.Лермонтов "Герой нашего времени". 200 &#8381;</label>
  </p>
  <p>
    <input id="third" type="checkbox" name="rate" value="1500" />
    <label for="third">А.С.Пушкин. Полное собрание сочинений в 5 томах. 1500 &#8381;</label>
  </p>

</div>
<div class="order-cost">
  <p><small>При покупке двух книг вы получите скидку в размере 10%</small></p>
  <p>Стоимость заказа составляет: <span id="price">0</span> &#8381;</p>
</div>

CSS

label {
  cursor: pointer;
}

.order-form p {
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
  padding: 5px;
  margin: 5px;
}

JavaScript

let $orderForm = $(".order-form");
let minQtyForDiscount = 2;

$orderForm.on("change", ":checkbox", function() {

  let summ = 0;
  let selected = 0;
  
  $(".order-form :checkbox").each(function(idx, elem) {
    if (elem.checked) {
      summ += parseInt(elem.value, 10);
      selected++;
    }
  });
  
  summ = selected >= minQtyForDiscount
  	? summ - ( summ / 100 * 10)
    : summ;
    
  $("#price").text(summ);
});