全选全不选

最新推荐文章于 2024-05-13 02:03:57 发布
M24女孩不秃头喔！
最新推荐文章于 2024-05-13 02:03:57 发布
阅读量78
点赞数
分类专栏： jquery
本文链接：https://blog.csdn.net/qq_57401304/article/details/117532500
版权
jquery 专栏收录该内容
3 篇文章 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>Document</title>
    <script src="jquery/js/jquery-2.0.0.min.js"></script>
    <script>
        $(function ($) {
            // 设置checkedAllBox
            $("#checkedAllBox").click(function () {
                // 点击后获取到下面四个按钮,他们的选中状态跟随checkedAllBox
                $("input[name=items]").prop("checked", $("#checkedAllBox").prop("checked"));
            });
            // 设置checkedAllBtn
            $("#checkedAllBtn").click(function () {
                // 获取所有的复选框
                $("input[type=checkbox]").prop("checked", true);
            });
            // 设置checkedNoBtn
            $("#checkedNoBtn").click(function () {
                // 获取所有复选框
                $("input[type=checkbox]").prop("checked", false)
            });
            // 设置checkedRevBtn
            $("#checkedRevBtn").click(function () {
                // 获取四个items复选框,遍历
                $("input[name=items]").each(function () {
                    this.checked = !this.checked
                })
            });
            // 设置sendBtn
            $("#sendBtn").click(function () {
                // 获取选中的四个复选框中的复选框
                $("input[name=items]:checked").each(function () {
                    alert(this.value)
                })
            })
            // 判断四个复选框是否被选中，从而影响checkedAllBox
            // 遍历四个复选框
            $("input[type=checkbox]").click(function () {
                // 判断被选中的个数是否等于复选框的长度
                $("#checkedAllBox").prop("checked", $("input[name=items]:checked").length == $("input[name=items]").length)
            });
            // 购物车案例
            // 设置btn02,n++
            $(".btn02").click(function () {
                //获取item里的value
                var n = $(this).siblings(".item").val();
                n++;
                // 将新的n赋值给当前的item里的value
                $(this).siblings(".item").val(n);
                // alert(p)
                // 获取件数
                var a = $(this).siblings("div").find(".sPer").text().substr(1);
                // alert(a * n)
                // 设置当前的sPur
                $(this).siblings("div").find(".sPur").text("￥" + (a * n).toFixed(2));
                getFun()
            });
            // 设置btn01,n--
            $(".btn01").click(function () {
                var n = $(this).siblings(".item").val();
                // 最低只能是1，此时需要结束整个函数
                if (n == 1) {
                    return false;
                };
                n--;
                $(this).siblings(".item").val(n);
                // alert(p)
                // 获取件数
                var a = $(this).siblings("div").find(".sPer").text().substr(1);
                // 设置当前的sPur
                $(this).siblings("div").find(".sPur").text("￥" + (aS * n).toFixed(2));
                getFun()
            });
            // 如果item里的值发生改变就执行下面的语句
            $("input[type=text]").change(function () {
                // 设置额数
                // 获取单价
                var p = $(this).val();
                // alert(p)
                // 获取件数
                var a = $(this).siblings("div").find(".sPer").text().substr(1);
                // alert(a * p)
                // 设置当前的sPur
                $(this).siblings("div").find(".sPur").text("￥" + (p * a).toFixed(2));
                getFun()
            })
            // 创建函数，计算总件数和总额
            function getFun() {
                // 总件数，遍历每一个item的value,转化成数字
                var count = 0;
                $(".item").each(function (i, ele) {
                    count += parseInt($(ele).val());
                })
                // 将count 赋值给sel04下的第一个span
                $(".sel04").children("span").eq(0).text("总件数：" + count);
                // 总额数
                var money = 0;
                $(".sPur").each(function (i, ele) {
                    money += parseFloat($(ele).text().substr(1))
                })
                $(".sel04").children("span").eq(1).text("总额数：" + money.toFixed(2))
            }
        })
    </script>
</head>

<body>
    <form method="post" action="">
        你爱好的运动是：<input type="checkbox" id="checkedAllBox" />全选、全不选
        <br />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="兵乓球" />兵乓球
        <br />
        <input type="button" id="checkedAllBtn" value="全 选" />
        <input type="button" id="checkedNoBtn" value="全不选" />
        <input type="button" id="checkedRevBtn" value="反 选" />
        <input type="button" id="sendBtn" value="提 交" />
    </form>
    <div class="sel01">
        <button class="btn01">z</button>
        <input type="text" value="1" class="item">
        <button class="btn02">y</button>
        <div>
            <span class="sPer">￥36.21</span>
            <span class="sPur">￥36.21</span>
        </div>
    </div>
    <div class="sel02">
        <button class="btn01">z</button>
        <input type="text" value="1" class="item">
        <button class="btn02">y</button>
        <div>
            <span class="sPer">￥19.60</span>
            <span class="sPur">￥19.60</span>
        </div>
    </div>
    <div class="sel03">
        <button class="btn01">z</button>
        <input type="text" value="1" class="item">
        <button class="btn02">y</button>
        <div>
            <span class="sPer">￥24.10</span>
            <span class="sPur">￥24.10</span>
        </div>
    </div>
    <div class="sel04">
        <span>总计件</span>
        </br>
        <span>总计额</span>
    </div>
</body>

</html>