模拟商品选择网页代码

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_37437892/article/details/82930772

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>QQ登录</title>
        <!--<link rel="stylesheet" href="css/a.css" type="text/css" />-->
        <script type="text/javascript">
            function myget() { //获取总金额
                var inputs = document.getElementsByTagName("input");
                var sum = 0;
                for(var i = 0; i < inputs.length; ++i) {
                    if(inputs[i].value == "quan") {
                        break;
                    }
                    if(inputs[i].checked) {
                        sum += 3000;
                    }
                }
                var sp = document.getElementById("sp");
                sp.innerHTML = sum + "元";
            }

            function out() {
                var sp = document.getElementById("sp");
                sp.innerHTML = "";
            }

            function change(a) {
                var inputs = document.getElementsByTagName("input");
                if(a == true) {
                    //alert("hah ");
                    for(var i = 0; i < inputs.length; ++i) {
                        if(inputs[i].value == "quan")
                            break;
                        else {
                            inputs[i].checked = true;
                        }
                    }
                }
                else for(var i=0;i<inputs.length;++i)
                       inputs[i].checked=false;
            }
        </script>
    </head>

    <body>
        <form>
            <p>商品列表</p>
            <input type="checkbox">笔记本电脑3000元<br />
            <input type="checkbox">笔记本电脑3000元<br />
            <input type="checkbox">笔记本电脑3000元<br />
            <input type="checkbox">笔记本电脑3000元<br />
            <input type="checkbox">笔记本电脑3000元<br />
            <input type="checkbox">笔记本电脑3000元<br />
            <input type="checkbox" value="quan" onclick="change(this.checked)">全选<br />
            <input type="button" value="总金额:" onclick="myget()" onmouseout="out()" />
            <span id="sp"></span>
        </form>
    </body>

</html>

猜你喜欢

转载自blog.csdn.net/qq_37437892/article/details/82930772