jQuery--简单的全选反选插件

最新推荐文章于 2021-07-22 13:29:40 发布

杰宝多多

最新推荐文章于 2021-07-22 13:29:40 发布

阅读量498

点赞数

分类专栏： HTML ，js

HTML ，js 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个简单的jQuery插件实现全选和反选功能的方法。通过该插件可以轻松控制一组复选框的选中状态，并实现与主复选框及反选按钮之间的联动。文中提供了完整的HTML结构、样式设置及JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解释一下：

这个代码没有吧全选前面的复选框和下面的复选框进行关联，在下一篇文章（ jQuery插件如何编写04_ 简单的全选反选插件（关联了主复选框和子复选框，代码简单））中，会把这个功能实现了

效果图：

代码：

<!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>