学习笔记-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();

});

});