0

<table>
    <tr>
        <td>
            <img src="https://place-hold.it/200x200?text=%D0%9F%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%201">
            <br>
            <p class="product-name">Продукт 1</p>
            <p class="product-price">150 руб</p>
            Количество
            <input type="number" value="1">
            <br> Выбрать
            <input type="checkbox">
        </td>
        <td>
            <img src="https://place-hold.it/200x200?text=%D0%9F%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%202">
            <br>
            <p class="product-name">Продукт 2</p>
            <p class="product-price">250 руб</p>
            Количество
            <input type="number" value="1">
            <br> Выбрать
            <input type="checkbox">
        </td>
        <td>
            <img src="https://place-hold.it/200x200?text=%D0%9F%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%203">
            <br>
            <p class="product-name">Продукт 3</p>
            <p class="product-price">350 руб</p>
            Количество
            <input type="number" value="1">
            <br> Выбрать
            <input type="checkbox">
        </td>
    </tr>
</table>
<p class="total-price">Тут итого</p>

Как можно посчитать сумму товаров при нажатии на чекбокс с количеством?

2
  • 2
    у вас уже есть какие либо наработки по этому вопросу? Что конкретно у вас не получается? Потому что сейчас ваш вопрос выглядит больше как задание
    – user199604
    Commented 26 авг. 2019 в 13:52
  • 'var total_price = 0; function CalculateTotal(){ $("input:checkbox").each(function(){ if($(this).is(":checked")){ total_price += parseFloat($(this).val()); } }); $("#total_price").html(total); } $("input:checkbox").change(function(){ total_price = 0; CalculateTotal(); }).trigger("change");'
    – Andrey Z.
    Commented 26 авг. 2019 в 14:35

1 ответ 1

2

Как вариант

var checkBtns = document.querySelectorAll('input[type="checkbox"]');
var resultPrice = 0;
var resultPriceCont = document.querySelector('.total-price');
checkBtns.forEach(function(elem) {
  elem.addEventListener('change', function(e) {
    var item = this.closest('td');
    var priceCont = item.querySelector('.product-price');
    var countCont = item.querySelector('input[type="number"]');
    var currentPrice = parseInt(countCont.value) * parseFloat(priceCont.innerText);
    if (this.checked) {
      countCont.setAttribute('disabled','disabled');
      resultPrice += currentPrice;
    }
    else {
      countCont.removeAttribute('disabled');
      resultPrice -= currentPrice;
    }
    resultPriceCont.innerText = 'Итого: ' + resultPrice + ' руб.'
  });
});
<table>
    <tr>
        <td>
            <img src="https://place-hold.it/200x200?text=%D0%9F%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%201">
            <br>
            <p class="product-name">Продукт 1</p>
            <p class="product-price">150 руб</p>
            Количество
            <input type="number" value="1">
            <br> Выбрать
            <input type="checkbox">
        </td>
        <td>
            <img src="https://place-hold.it/200x200?text=%D0%9F%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%202">
            <br>
            <p class="product-name">Продукт 2</p>
            <p class="product-price">250 руб</p>
            Количество
            <input type="number" value="1">
            <br> Выбрать
            <input type="checkbox">
        </td>
        <td>
            <img src="https://place-hold.it/200x200?text=%D0%9F%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%203">
            <br>
            <p class="product-name">Продукт 3</p>
            <p class="product-price">350 руб</p>
            Количество
            <input type="number" value="1">
            <br> Выбрать
            <input type="checkbox">
        </td>
    </tr>
</table>
<p class="total-price">Тут итого</p>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.