制作简单教材购物车网页

最新推荐文章于 2024-06-22 00:30:17 发布

一行tf

最新推荐文章于 2024-06-22 00:30:17 发布

阅读量790

点赞数 1

分类专栏： javaweb 文章标签： js

本文链接：https://blog.csdn.net/tf617/article/details/116492940

版权

javaweb 专栏收录该内容

16 篇文章 8 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教材选购清单</title>
    <style>
        #form-one{
            border: 1px solid gray;
            padding: 20px;
        }
        #global{
            width: 500px;
            height: 400px;
            margin: 0 auto;
        }
        h1{
            text-align: center;
           
        }
        p{
            color:red;
        }
        #content{
           border:1px dotted black;
           margin-bottom: 20px;
        }
    </style>
    <script>
        function show(){
            var obj=document.getElementsByName("test");
            var check=[]
            var sum=0;
            for(var i=0;i<obj.length;i++){
              if(obj[i].checked==true){
                check.push(obj[i].value);
                sum+=1;
              }
            }
            alert("你共选购了"+sum+"本书\n你要购买的书是:"+check);
        }
    </script>
</head>
<body>
    <div id="global">
        <h1>教材选购清单</h1>
        <form id="form-one">
            <p>你想订购哪几本教材？</p>
            <div id="content">
                <input type="checkbox"name="test" value="web前端开发技术（第3版）"><span>web前端开发技术（第3版）</span><br>
                <input type="checkbox"name="test" value="Dreamweaver CS6网页设计与制作案例教程（第3版）"><span>Dreamweaver CS6网页设计与制作案例教程（第3版）</span>
            </div>
            <input type="button" value="发送教材选购单" onclick="show()">
        </form>
    </div>
</body>
</html>

一行tf

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
制作简单教材购物车网页

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...
复制链接

扫一扫

专栏目录