JSFiddle - React, Tailwind, and code Playground
HTML
<div class="item_box">
<h3 class="item_title">Flash Kingston 50 mb</h3>
<p>Выберите объём флеш-накопителя</p>
<p>
<input name="val1" type="radio" data-price="20" data-id="10" data-param="8 GB" value="1">8 GB</p>
<p>
<input name="val1" type="radio" data-price="22" data-id="15" data-param="16 GB" value="2">16 GB</p>
<p>
<input name="val1" type="radio" data-price="25" data-id="5" data-param="32 GB" value="3">32 GB</p>
<p>
<input name="val1" type="radio" data-price="27" data-id="20" data-param="64 GB" value="4">64 GB</p>
<p>Укажите количество:</p>
<p>
<input maxlength="3" size="5" value="1" class="amount">
</p>
<p>Цена: <span class="item_price">0</span>$</p>
<button class="add_item">Добавить в корзину</button>
</div>
<hr>
<button id="test">Проверить</button>
<ul id="output"></ul>
JavaScript
var pseudoStorage = {}; // как бы localStorage
document.querySelector('.add_item').addEventListener('click', addToCart, false);
// Вывод цены при выборе
[].forEach.call(document.querySelectorAll('input[type="radio"]'), function(el) {
el.addEventListener('change', function() {
this.parentNode.parentNode.querySelector('.item_price').textContent = this.dataset.price;
}, false);
});
// Добавление товара
function addToCart() {
var box = this.parentNode,
choice = box.querySelector('input[type="radio"]:checked'),
amount = box.querySelector('.amount'),
data;
if (!choice) { // выбор не сделан
return false;
}
data = choice.dataset;
if (pseudoStorage.hasOwnProperty(data.id)) {
pseudoStorage[data.id].count += +amount.value;
} else {
pseudoStorage[data.id] = {
name: box.querySelector('.item_title').textContent + ' (' + data.param + ')',
price: data.price,
count: +amount.value
};
}
box.querySelector('.item_price').textContent = 0;
choice.checked = false;
amount.value = 1;
}
/* ----- Вывод для проверки --- */
test.addEventListener('click', function() {
var out = '';
for (var id in pseudoStorage) {
out += '<li>ID:' + id + ', ' + pseudoStorage[id].name + ', ' + pseudoStorage[id].price + '$, кол-во: ' + pseudoStorage[id].count + ', сумма: ' + (pseudoStorage[id].count * pseudoStorage[id].price) + '$</li>';
}
output.innerHTML = out;
}, false);