HTML购物车示例（勾选、删除、添加和结算功能）

以下是一个简单的HTML购物车示例，包含勾选、删除、添加和结算功能。结算功能使用PHP实现，可以获取选中商品的ID。

以下是一个简单的HTML购物车示例，包含勾选、删除、添加和结算功能。结算功能使用PHP实现，可以获取选中商品的ID`以下是一个简单的HTML购物车示例，包含勾选、删除、添加和结算功能。结算功能使用PHP实现，可以获取选中商品的ID。

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="css/style.css" /><title>购物车</title><style>table {border-collapse: collapse;width: 100%;}th, td {text-align: left;padding: 8px;border-bottom: 1px solid #ddd;}tr:hover {background-color: #f5f5f5;}.check {width: 20px;}.delete {color: red;cursor: pointer;}.total {font-weight: bold;text-align: right;}#checkout {margin-top: 20px;text-align: right;}</style>
</head>
<body><h1>购物车</h1><table><thead><tr><th class="check"></th><th>商品名称</th><th>价格</th><th>数量</th><th>小计</th><th class="delete"></th></tr></thead><tbody><tr class="item-row" data-id="1"><td class="check"><input type="checkbox" name="item[]" value="1"></td><td>商品1</td><td>10.00</td><td><input type="number" name="quantity[]" value="1"></td><td class="subtotal">10.00</td><td class="delete">X</td></tr><tr class="item-row" data-id="2"><td class="check"><input type="checkbox" name="item[]" value="2"></td><td>商品2</td><td>20.00</td><td><input type="number" name="quantity[]" value="1"></td><td class="subtotal">20.00</td><td class="delete">X</td></tr><tr class="item-row" data-id="3"><td class="check"><input type="checkbox" name="item[]" value="3"></td><td>商品3</td><td>30.00</td><td><input type="number" name="quantity[]" value="1"></td><td class="subtotal">30.00</td><td class="delete">X</td></tr></tbody><tfoot><tr><td colspan="4" class="total">总计：</td><td class="total" id="total">0.00</td><td></td></tr></tfoot></table><div id="checkout"><button onclick="checkout()">结算</button></div><script>// 计算小计和总计function updateSubtotal() {var rows = document.querySelectorAll('.item-row');var total = 0;for (var i = 0; i < rows.length; i++) {var row = rows[i];var price = parseFloat(row.querySelector('td:nth-child(3)').textContent);var quantity = parseInt(row.querySelector('input[name="quantity[]"]').value);var subtotal = price * quantity;row.querySelector('.subtotal').textContent = subtotal.toFixed(2);total += subtotal;}document.querySelector('#total').textContent = total.toFixed(2);}// 删除商品function deleteItem() {var row = this.parentNode;row.parentNode.removeChild(row);updateSubtotal();}// 添加商品function addItem() {var table = document.querySelector('table');var row = table.insertRow(-1);row.classList.add('item-row');row.dataset.id = Date.now(); // 生成一个随机IDrow.innerHTML = `<td class="check"><input type="checkbox" name="item[]" value="${row.dataset.id}"></td><td><input type="text" name="name[]"></td><td><input type="number" name="price[]" step="0.01"></td><td><input type="number" name="quantity[]" value="1"></td><td class="subtotal">0.00</td><td class="delete">X</td>`;row.querySelector('.delete').addEventListener('click', deleteItem);row.querySelector('input[name="quantity[]"]').addEventListener('input', updateSubtotal);row.querySelector('input[name="price[]"]').addEventListener('input', updateSubtotal);}// 结算选中的商品function checkout() {var items = document.querySelectorAll('input[name="item[]"]:checked');var ids = [];for (var i = 0; i < items.length; i++) {ids.push(items[i].value);}if (ids.length > 0) {window.location.href = 'checkout.php?ids=' + ids.join(',');} else {alert('请选择要结算的商品');}}// 绑定事件var deleteButtons = document.querySelectorAll('.delete');for (var i = 0; i < deleteButtons.length; i++) {deleteButtons[i].addEventListener('click', deleteItem);}var addBtn = document.querySelector('#add');addBtn.addEventListener('click', addItem);var quantityInputs = document.querySelectorAll('input[name="quantity[]"]');for (var i = 0; i < quantityInputs.length; i++) {quantityInputs[i].addEventListener('input', updateSubtotal);}var priceInputs = document.querySelectorAll('input[name="price[]"]');for (var i = 0; i < priceInputs.length; i++) {priceInputs[i].addEventListener('input', updateSubtotal);}</script>
</body>
</html>
`

HTML购物车示例（勾选、删除、添加和结算功能）相关推荐

android二级联动购物车,Android实现二级购物车的全选加反选、总价功能
本文实例为大家分享了Android实现二级购物车的全选加反选.总价的具体代码,供大家参考,具体内容如下 MainActivity import android.support.v7.app.AppCo ...
ectouch购物车添加勾选结算功能
购物车勾选结算功能开发使用的是ectouch企业版,带有购物车功能. 当前功能:在商品详情页面,点击添加购物车后,会进入购物车中.在购物车页面,点击'立即购买'会将购物车中的全部商品都结算生成订单. ...
jQuery 表单提交衣服尺寸选择勾选获取value值-20130720
1.效果及功能说明表单提交制作各大商城衣服尺寸选择勾选效果,点击购物车提交勾选尺寸value值.一款简单实用的衣服尺寸选择勾选效果 2.实现原理通过查询当前的图片的id然后通过对应id找到在通过遍 ...
visual2019没有勾选的在如何加入_发票管理系统完成升级，勾选认证平台改头换面，你所有的问题都在这里！...
发票系统2.0版上线为了进一步优化增值税发票系统,提高用户体验,根据国家税务总局安排部署,我省将于2019年11月1日对增值税发票管理系统进行全面升级改造为增值税发票管理系统2.0版. 增值税发票综 ...
layui 分页勾选。
话不多说直接上图,上代码 ui:layui 后台用的thinkphp5 不用安装啥,只要自己有layui的js,引入后提取你需要的部分. 主要部分:parseData返回数据处理.工具栏事件.单选事件 ...
C# mschart 控件框选删除部分数据及游标CursorX CursorY 使用
C# mschart 控件框选删除部分数据实现功能 : 1.鼠标框选,选中chart控件中部分数据: 2.将选中的数据标红显示: 3.删除选中的红色数据: demo源码下载:https://gi ...
怎样添加服务器远程角色,添加角色和功能，Windows Server 2012 R2如何安装远程桌面服务...
今天介绍添加角色和功能,Windows Server 2012 R2如何安装远程桌面服务.小伙伴们可能不一定了解,Windows Server 2012 R2操作系统的一个亮点就是系统组件化管理,所有 ...
批量删除，未勾选数据，点击【批量删除】弹出确认删除提示框
批量删除,未勾选数据,点击[批量删除]弹出确认删除提示框给table组件,添加ref="selections" 在分页方法中,添加方法.设置为空
MFC添加勾选控件check box
代码 void CCarFollowDlg::OnBnClickedCheck1() {// TODO: 在此添加控件通知处理程序代码//IDC_CHECK1是click box的IDCButton* ...

HTML购物车示例（勾选、删除、添加和结算功能）

HTML购物车示例（勾选、删除、添加和结算功能）相关推荐

最新文章

热门文章