购物车页面实现复选框的选中，全选功能和按单价，数量实现总价的自动计算（更新）

最新推荐文章于 2022-01-30 15:37:58 发布

白山茶ι

最新推荐文章于 2022-01-30 15:37:58 发布

阅读量5.6k

点赞数 5

分类专栏： web入门教程文章标签： Javaweb js

本文链接：https://blog.csdn.net/Carol_x/article/details/104962634

版权

购物车全选，单选，价格的实现（更新）
完成效果
在这里插入图片描述
HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>叮当图书网-查看购物车</title>
    <link href="css/mycar.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript " src="js/myCar.js"></script>
    <!-- <script src="js/MyJs.js"></script> -->
    <style type="text/css">
ul {
   
	list-style: none;
}
li {
   
	float: left;
}
a {
   
	text-decoration: none;
}
ul a {
   
	color: black;
	font-size: 20px;
}
</style>
</head>
<body>
<div><h3>您的位置：<span><a href="#">首页</a></span>&gt;我的购物车</h3></div>
<div>
<ul >
<li><a href="#">1.查看购物车</a></li>
<li><a href="#">2.确认订单信息</a></li>
<li><a href="#">3.付款到支付宝</a></li>
<li><a href="#">4.确认收货</a></li>
<li><a href="#">5.评价</a></li>
</ul>
</div>
<table class="table1" id="table1">
    <thead>
    <tr>
        <th><input type="checkbox" id="checkAll" οnclick="selectAll()"/>全选</th>
        <th></th>
        <th>饰品名称</th>
        <th>单价（元）</th>
        <th>数量</th>
        <th>小计（元）</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="lists">
    <tr>
        <td><input type="checkbox" name="checkOne" οnclick="selectAll()"></td>
        <td><img class="imgclass" src="images/捕梦铃.jpg" alt="捕梦铃"/></td>
        <td><a href="#">捕梦铃</a></td>
        <td class="unitPrice">900.00</td>
        <td>
            <input id="t1" class="num-minus num" type="button" value="-"/>
            <input id="ta" class="amount" type="text" size="5" value="1"/>
            <input id="t2" class="num-plus num" type="button" value="+"/>
        </td>
        <td class="subtotal"></td>
        <td><a href="#">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne" οnclick="selectAll()"></td>
        <td><img class="imgclass" src="images/四叶草.jpg" alt="四叶草"/></td>
        <td><a href="#">四叶草</a></td>
        <td class="unitPrice">3300.68</td>
        <td>
            <input id="subtract" class="num-minus num" type="button" value="-"/>
            <input id="text" class="amount" type="text" size="5" value="1"/>

最低0.47元/天解锁文章

白山茶ι

关注

5
点赞
踩
42

收藏

觉得还不错? 一键收藏
4
评论
购物车页面实现复选框的选中，全选功能和按单价，数量实现总价的自动计算（更新）

购物车全选，单选，价格的实现（更新）完成效果HTML代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>叮当图书网-查看购物车</title> <link href="css/mycar.css" rel="style...
复制链接

扫一扫

专栏目录