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

最新推荐文章于 2025-04-10 23:40:02 发布

原创最新推荐文章于 2025-04-10 23:40:02 发布 · 577 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jQuery #插件 #全选反选

jQuery 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个简单的jQuery全选插件实现方法。通过自定义jQuery插件，实现了页面上复选框的全选和反选功能。文章提供了完整的HTML、CSS及JavaScript代码，并展示了如何在点击全选按钮时更新所有子项的状态。

解释一下：

如果需要看进一步封装的效果，请进入“ jQuery插件如何编写03_ 简单的全选反选插件”这篇文章

效果图：

代码：

<!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"/>全选
<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;
        })
    }
});

//主函数
$(function(){
    $("#checkedAllId").click(function () {
        //调用jQuery插件中的checkAll函数
        $("#list :checkbox").checkAll(this.checked);
    });
});

</script>