Посчитать исходя из нажатых чекбоксов (товары)

84
21 июня 2021, 19:50

<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>

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

Answer 1

Как вариант

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>

READ ALSO
Позиционирование label

Позиционирование label

Не получается задать позиционирование тексту для загрузки аватараЕсть еще одна проблема, имеется выпадающее меню в вверху, она перестала...

91
Создание прелоадера SVG не круглой формы

Создание прелоадера SVG не круглой формы

Необходимо создать SVG прелоадер для сайта, но не умею работать с самими SVG (рисовать правильно)Идея такая:

102
Как сверстать стул как на картинке?

Как сверстать стул как на картинке?

Как сверстать такой стул, как на картинке, чтобы ножки не вылезали, а сиденье вылезало за пределы круга?

106
библиотека fullpage js

библиотека fullpage js

Скачал и подключил библиотеку fullpagejs, в консоль пишет

108