jquery插件开发，checkbox全选的简单实例
html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>checkbox plugin</title>
<script type="text/javascript" src="../jquery-1.8.2.js"></script>
<script type="text/javascript" src="check.js"></script>
<!--
<script type="text/javascript" src="check2.js"></script>
-->
<script type="text/javascript" src="check3.js"></script>
</head>
<body>
<div>
<button onclick="CheckAll();">选择全部</button>
<button onclick="UnCheckAll();">清除全部</button>
<hr />
<input type="checkbox" />全选<br />
<input type="checkbox" />测试<br />
<input type="checkbox" />测试<br />
<input type="checkbox" />测试<br />
<input type="checkbox" />测试<br />
<input type="checkbox" />测试<br />
<input type="checkbox" />测试<br />
<input type="checkbox" />测试<br />
<input type="checkbox" />测试<br />
<input type="checkbox" />测试<br />
<input type="checkbox" />测试<br />
<input type="checkbox" />测试<br />
</div>
<script type="text/javascript">
function CheckAll(){
$('input:checkbox').check();
}
function UnCheckAll(){
$('input:checkbox').uncheck();
}
$(function(){
//$('input:checkbox').tukiCheck();
$.tukiCheck('checkall');
});
</script>
</body>
</html>js代码一：
jQuery.fn.extend({
check: function(){
return this.each(function(){this.checked = true;}); //return a jquery object
},
uncheck: function(){
return this.each(function(){this.checked = false;});
}
});此段js插件开发为对象级别插件开发，即给jquery对象方法。
hml中调用的时候，先引入js，然后点击事件触发方法即可。
$('input:checkbox').check();
$('input:checkbox').uncheck();
js代码二：
1 (function($){
2 var methods = {
3 init: function(options){
4 return this.each(function(){
5 var settings = $.extend({}, options);
6
7 var $this = $(this);
8
9 $this.click(function() {
10 var ckId = $this.attr('id');
11
12 if (ckId == 'checkall') {
13 if ($this.attr('checked')) {
14 $this.siblings('input:checkbox').attr('checked', true);
15 } else {
16 $this.siblings('input:checkbox').attr('checked', false);
17 }
18 }
19 });
20 });
21 }
22 };
23
24 $.fn.tukiCheck = function(){
25 var method = arguments[0];
26
27 if (methods[method]) {
28 method = methods[method];
29 arguments = Array.prototype.slice.call(arguments, 1);
30 } else if (typeof(method) == 'object' || !method) {
31 method = methods.init;
32 } else {
33 $.error( 'Method ' + method + ' does not exist on jQuery.pluginName' );
34 return this;
35 }
36
37 return method.apply(this, arguments);
38 };
39 })(jQuery);此插件开发为对象级别插件开发。也可以
(function($){
$.fn.extend({
})
})(jQuery)
html中调用：$('input:checkbox').tukiCheck();
js代码三：
1 //tuki jquery ext
2 (function($, undefined){
3 var methods = {
4 checkall : function(){
5 var $chekcAllObj = $('#checkall');
6
7 if (undefined != $chekcAllObj) {
8 $chekcAllObj.click(function() {
9 var $this = $(this);
10 if ($this.attr('checked')) {
11 $this.siblings('input:checkbox').attr('checked', true);
12 } else {
13 $this.siblings('input:checkbox').attr('checked', false);
14 }
15 });
16 }
17 //return true;
18 }
19 };
20
21 $.tukiCheck = function(method) {
22 // Method calling logic
23 if (methods[method]) {
24 return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1));
25 } else if (typeof method === 'object' || ! method) {
26 return methods.init.apply(this, arguments);
27 } else {
28 $.error('Method ' + method + ' does not exist on jQuery.tukibox');
29 }
30 };
31 })(jQuery);此插件开发为类级别开发，即直接为jquery类本身添加方法。
html中调用：$.tukiCheck('checkall');