jQuery插件如何编写03_ 简单的全选反选插件

最新推荐文章于 2021-02-11 07:49:40 发布

田江

最新推荐文章于 2021-02-11 07:49:40 发布

阅读量335

点赞数

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

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

版权

jQuery 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

解释一下：

这个代码没有吧全选前面的复选框和下面的复选框进行关联，在下一篇文章（ 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.each(function () {
            //这个this是jQuery包装集中的每个DOM对象
            this.checked = isChecked;
        })
    },

    "uncheck":function () {
        //this是jQuery对象
        this.each(function () {
            this.checked = !this.checked;
        })
    }
});

//主函数
$(function(){
    //点击全选的复选框，调用插件中的checkAll函数
    $("#checkedAllId").click(function () {
        $("#list :checkbox").checkAll(this.checked);
    });

    //点击反选的按钮，调用插件中的uncheck函数
    $("#btnUnCheckId").click(function () {
        $("#list :checkbox").uncheck();
    });
});
</script>

田江

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery插件如何编写03_ 简单的全选反选插件

解释一下：这个代码没有吧全选前面的复选框和下面的复选框进行关联，在下一篇文章（jQuery插件如何编写04_ 简单的全选反选插件（关联了主复选框和子复选框，代码简单））中，会把这个功能实现了效果图：代码：全选反选 *{ margin: 0; padding:
复制链接

扫一扫