<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>
Как можно посчитать сумму товаров при нажатии на чекбокс с количеством?
Как вариант
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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Не получается задать позиционирование тексту для загрузки аватараЕсть еще одна проблема, имеется выпадающее меню в вверху, она перестала...
Необходимо создать SVG прелоадер для сайта, но не умею работать с самими SVG (рисовать правильно)Идея такая:
Как сверстать такой стул, как на картинке, чтобы ножки не вылезали, а сиденье вылезало за пределы круга?