学习笔记-jQuery扩展示例

利用jquery实现复选框的全选、取消、反选功能。

创建public.js插件文件,用于扩展jQuery。
jQuery.fn.extend({
quanxuan : function() {
this.attr('checked', true);
},
quxiao : function() {
this.attr('checked', false);
},
fanxuan : function() {
//this指向外边调用的jQuery对象,它是一个数组
//循环遍历this,this有几个元素,说明有几个复选框 
for ( var i = 0; i < this.length; i++) {
//判断当前第i个选框是否被选中
if (this[i].checked == true) {
//取消选中
this[i].checked = false;
} else {
//选中
this[i].checked = true;
}
}
}
});

调用文件

$().ready(function() {

//全选
$('#btn1').bind('click', function() {
$(":checkbox").quanxuan();
});

//取消
$('#btn2').bind('click',function(){
$(':checkbox').quxiao();
});

//反选
$('#btn3').bind("click",function(){
$(':checkbox').fanxuan();
});
});
发布了35 篇原创文章 · 获赞 7 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/qq_23586923/article/details/78876367