使用jQuery练习——复选框按钮

小卤猪

于 2021-04-02 17:29:47 发布

阅读量253

点赞数

本文链接：https://blog.csdn.net/m0_47697351/article/details/115404426

版权

尚硅谷JavaWeb——jQuery练习（附代码）

1、全选
在这里插入图片描述
2、全不选

3、反选

4、提交
此处用alert()来逐个显示

5、给 全选/选不选 复选框绑定事件
点击【全选/选不选】有两种结果。全选中，全部不选

6、给每一个 球类复选框 绑定事件
当四个【球类复选框】都选中时，【全选/选不选】框应被选中。
相反，如有【球类复选框】不被选中时，【全选/选不选】框不被选中

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            //prop()函数用于设置或返回当前jQuery对象所匹配的元素的属性值

            //1、全选单击事件
            $("#checkedAllBtn").click(function () {
                $(":checkbox").prop("checked",true);
            });

            //2、全不选单击事件
            $("#checkedNoBtn").click(function () {
                $(":checkbox").prop("checked",false);
            });

            //3、反选单击事件
            $("#checkedRevBtn").click(function () {
                //查询球类的复选框，取反
                $(":checkbox[name='items']").each(function () {
                    //在each遍历的function函数中，有一个this对象。这个this对象是当前正在遍历到的dom对象
                    this.checked=!this.checked;
                });
                //检查是否为满选，来确定（全选/全不选）框的状态
                //①、获取全部球类复选框的个数
                var allCount=$(":checkbox[name='items']").length;
                //②、获取已选中球类的个数
                var checkedCount=$(":checkbox[name='items']:checked").length;
                //③、比较，如个数相同，则选中（全选/全不选）框。不同，则取消（全选/全不选）框
                /* if(allCount==checkedCount){
                     $("#checkedAl1Box").prop("checked",true);
                 }else{
                     $("#checkedAl1Box").prop("checked",false);
                 }*/
                $("#checkedAl1Box").prop("checked",allCount==checkedCount);
            });

            //4、【提交】按钮单击事件
            $("#sendBtn").click(function () {
                //获取选中的球类复选框
                $(":checkbox[name='items']:checked").each(function () {
                    alert(this.value);
                });
            });

            //5、给【全选/全不选】绑定单击事件
            $("#checkedAl1Box").click(function () {
                //在事件的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象
                $(":checkbox[name='items']").prop("checked",this.checked);
            });

            //6、给全部球类复选框绑定单击事件
            $(":checkbox[name='items']").click(function () {
                //检查是否为满选，来确定（全选/全不选）框的状态
                //①、获取全部球类复选框的个数
                var allCount=$(":checkbox[name='items']").length;
                //②、获取已选中球类的个数
                var checkedCount=$(":checkbox[name='items']:checked").length;
                //③、比较，如个数相同，则选中（全选/全不选）框。不同，则取消（全选/全不选）框
                /* if(allCount==checkedCount){
                     $("#checkedAl1Box").prop("checked",true);
                 }else{
                     $("#checkedAl1Box").prop("checked",false);
                 }*/
                $("#checkedAl1Box").prop("checked",allCount==checkedCount);
            });
        });
    </script>
</head>

<body>
    <form method="post" action="">
        你爱好的运动是? <input type="checkbox" id="checkedAl1Box" />全选/全不选
        <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>
</body>
</html>

小卤猪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery练习——复选框按钮

尚硅谷JavaWeb——jQuery练习（附代码）1、全选2、全不选3、反选4、提交此处用alert()来逐个显示5、给全选/选不选复选框绑定事件点击【全选/选不选】有两种结果。全选中，全部不选6、给每一个球类复选框绑定事件当四个【球类复选框】都选中时，【全选/选不选】框应被选中。相反，如有【球类复选框】不被选中时，【全选/选不选】框不被选中代码如下：<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫