JavaWeb小案例-1

horizonTel

已于 2022-01-29 19:12:47 修改

阅读量970

点赞数

分类专栏：前端文章标签： javascript 前端 html

于 2022-01-29 19:12:04 首次发布

本文链接：https://blog.csdn.net/weixin_52003758/article/details/122746656

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaWeb小案例-1

JavaWeb小案例实现功能1、全选、反选、全不选2、若果点击复选框全选/全不选,下面的四个复选框会跟着变动3、若用户四个全部选中，上面复选框自动打上勾代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title> <script type="text/javascript" src
复制链接

扫一扫