jQuery插件如何编写05_ 简单的全选反选插件（完整版）

最新推荐文章于 2022-05-28 10:11:34 发布

田江

最新推荐文章于 2022-05-28 10:11:34 发布

阅读量593

点赞数

分类专栏： jQuery 文章标签： jQuery 插件全选反选

本文链接：https://blog.csdn.net/jiang7701037/article/details/79182330

版权

jQuery 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

解释一下：

这个版本是完整版，从“jQuery插件如何编写01”到“jQuery插件如何编写05”是让大家一步一步过渡过来，循序渐进地学习。

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选反选</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
    </style>
</head>
<body>

<input id="checkedAllId" type="checkbox"/>全选
<input id="btnUnCheckId" type="button" value="反选">
<ul id="list">
    <li><label><input type="checkbox"/>1.时间都去哪了</label></li>
    <li><label><input type="checkbox"/>2.小苹果</label></li>
    <li><label><input type="checkbox"/>3.浪迹天涯</label></li>
    <li><label><input type="checkbox"/>4.小花花</label></li>
    <li><label><input type="checkbox"/>5.你是我的眼</label></li>
    <li><label><input type="checkbox"/>6.天南地北</label></li>
</ul>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">

//定义一个jQuery插件(全选，反选)
jQuery.fn.extend({
    "checkAll":function (isChecked) {
        //this是jQuery对象
        this.prop("checked",isChecked);
    },
    "uncheck":function () {
        //this是jQuery对象
        this.each(function () {
            //this是jQuery包装集里每个DOM元素
            this.checked = !this.checked;
        })
    },
    //功能：全选的复选框和子复选框以及反选按钮的关联，
    //参数$sub是子复选框,
    //$unCheckBtn是反选按钮
    "checkRelation":function ($sub,$unCheckBtn) {
        let $parent = this;

        //功能：点击父复选框时，需要控制子复选框的选中状态
        //全选的功能（父控制子）
        this.click(function () {
            $sub.checkAll($parent.prop("checked"));
        });

        //功能:点击子复选框时，需要联动
        //联动（子控制父：子复选框有改变，那么父复选框也要有对应的改变）
        $sub.click(function () {
            match();
        });

        //功能：点击反选按钮时，把子复选框进行反选，同时，还需要把父子复选框进行匹配
        $unCheckBtn.click(function () {
            //子复选框反选
            $sub.uncheck();
            //父子进行匹配
            match();
        });

        //把主复选框和子复选框的状态进行匹配
        function match() {
            //1、遍历所有的子复选框
            let isChecked = true;
            $sub.each(function () {
                if(this.checked==false){
                    isChecked = false;
                }
            })
            //2、改变父复选框的状态
            $parent.prop("checked",isChecked);
        }
    }
});

//主函数
$(function(){
    //这个函数的作用是把一个复选框（主复选框）、很多复选框（子复选框）和反选按钮关联起来了。
    $("#checkedAllId").checkRelation($("#list :checkbox"),$("#btnUnCheckId"));
});

</script>

田江

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
jQuery插件如何编写05_ 简单的全选反选插件（完整版）

解释一下：这个版本是完整版，从“jQuery插件如何编写01”到“jQuery插件如何编写05”是让大家一步一步过渡过来，循序渐进地学习。效果图：代码：全选反选 *{ margin: 0; padding: 0; } ul {
复制链接

扫一扫