JavaWeb小案例-1

已于 2022-01-29 19:12:47 修改
阅读量1k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： javascript 前端 html
于 2022-01-29 19:12:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52003758/article/details/122746656
JavaWeb小案例
实现功能

HTML展示内容

1、全选、反选、全不选
2、若果点击复选框全选/全不选,下面的四个复选框会跟着变动
3、若用户四个全部选中，上面复选框自动打上勾
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="../jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#checkall").click(function(){        // 全选
                $(":checkbox").prop("checked", true);
            });

            $("#checknone").click(function(){       // 全不选
                $(":checkbox").prop("checked", false);
            });

            $("#checkother").click(function () {    // 反选
                $(":checkbox[name='content']").each(function () {
                    this.checked = !this.checked;       // 在function中有一个this对象是dom对象,this.checked代表true/false
                })

                // 检查是否满选
                var allCount = $(":checkbox[name='content']").length;
                var checkedCount = $(":checkbox[name='content']:checked").length;
                $("#checkallBox").prop("checked", allCount == checkedCount);
            });

            $(":submit").click(function () {        // 提交
                // 获取选中的球类的复选框
                $(":checkbox[name='content']:checked").each(function () {
                        alert(this.value);
                })
            })

            $("#checkallBox").click(function () {   // 若果点击复选框全选/全不选,下面的四个复选框会跟着变动
                $(":checkbox[name='content']").prop("checked", this.checked)
            })

            $(":checkbox[name='content']").click(function (){
                var allCount = $(":checkbox[name='content']").length;
                var checkedCount = $(":checkbox[name='content']:checked").length;
                $("#checkallBox").prop("checked", allCount == checkedCount);
            })
        })
    </script>
</head>

<body>
    <form method="post" action="#">
        你爱好的运动是?<input type="checkbox" id="checkallBox">全选/全不选<br>
        <input type="checkbox" name="content" value="足  球">足  球
        <input type="checkbox" name="content" value="篮  球">篮  球
        <input type="checkbox" name="content" value="羽毛球">羽毛球
        <input type="checkbox" name="content" value="乒乓球">乒乓球<br>

        <input type="button" id="checkall" value="全 选">
        <input type="button" id="checknone" value="全不选">
        <input type="button" id="checkother" value="反选">
        <input type="submit" value="提 交">
    </form>
</body>
</html>
horizonTel
关注