您的位置：首页 > Web前端 > JQuery

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

2018-01-27 18:42 471 查看

解释一下：

     这个代码没有吧全选前面的复选框和下面的复选框进行关联，在下一篇文章（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>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                jQuery
                                                插件
                                                全选反选
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航