JSFiddle - React, Tailwind, and code Playground

by Sergey Aleshin

HTML

<div id="cart">
0
</div>
<ul id="list_items">
  <li id="item">
    <input type="checkbox" id="checkbox_for_item" data_item_id="1"><span id="item_price1">100</span><br>
    <span>Item 1</span>
  </li>
  <li id="item">
    <input type="checkbox" id="checkbox_for_item" data_item_id="2"><span id="item_price2">150</span><br>
    <span>Item 1</span>
  </li>
  <li id="item">
    <input type="checkbox" id="checkbox_for_item" data_item_id="3"><span id="item_price3">50</span><br>
    <span>Item 1</span>
  </li>
  <li id="item">
    <input type="checkbox" id="checkbox_for_item" data_item_id="4"><span id="item_price4">30</span><br>
    <span>Item 1</span>
  </li>
</ul>

CSS

ul {
  padding: 0;
  list-style: none;
}
ul li {
  margin-bottom: 10px;
  padding: 10px;
  
  background-color: #888;
}
ul li:last-child {
  margin-bottom: 0;
}

JavaScript

// Массив элементов корзины
var list_items = new Array();
// Элемент корзины
var item = function(id, price) {
  return {
  	item_id: id,
    item_price: price
  }
}

// Ищем все элементы списка
var elements = document.getElementById("list_items").querySelectorAll("li#item");
// Обновляет корзину
function updateCart() {
	var price = 0;
	for(var i = 0; i < list_items.length; i++) {
  	price += parseInt(list_items[i].item_price);
  }
  document.getElementById("cart").innerHTML = price;
}

// Добавить в корзину
function addToCart(item_id) {
	var price = document.getElementById("item_price"+ item_id).innerHTML;
  list_items.push(new item(item_id, price));
  updateCart();
}
// Удалить из корзины
function removeFromCart(item_id) {
	for(var i = 0; i < list_items.length; i++) {
  	if(list_items[i].item_id == item_id) {
    	list_items.splice(i, 1);
      break;
    } 
  }
  updateCart();
}

// Вешает собсытия на чекбоксы
for(var i = 0; i < elements.length; i++ ) {
  elements[i].querySelectorAll("#checkbox_for_item")[0].onchange = function(e) {
  	var id = this.getAttribute("data_item_id");
		if(this.checked) {
    	addToCart(id);
  	} else {
  		removeFromCart(id);
  	}
  }
  //}
}