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

jquery插件开发(checkbox全选的简单实例)

2013-10-17 16:26 771 查看

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"  id="checkall" />全选<br />
<input type="checkbox"  id="c2" />测试<br />
<input type="checkbox"  id="Checkbox1" />测试<br />
<input type="checkbox"  id="Checkbox2" />测试<br />
<input type="checkbox"  id="Checkbox3" />测试<br />
<input type="checkbox"  id="Checkbox4" />测试<br />
<input type="checkbox"  id="Checkbox5" />测试<br />
<input type="checkbox"  id="Checkbox6" />测试<br />
<input type="checkbox"  id="Checkbox7" />测试<br />
<input type="checkbox"  id="Checkbox8" />测试<br />
<input type="checkbox"  id="Checkbox9" />测试<br />
<input type="checkbox"  id="Checkbox10" />测试<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代码二：

(function($){
var methods = {
init: function(options){
return this.each(function(){
var settings = $.extend({}, options);

var $this = $(this);

$this.click(function() {
var ckId = $this.attr('id');

if (ckId == 'checkall') {
if ($this.attr('checked')) {
$this.siblings('input:checkbox').attr('checked', true);
} else {
$this.siblings('input:checkbox').attr('checked', false);
}
}
});
});
}
};

$.fn.tukiCheck = function(){
var method = arguments[0];

if (methods[method]) {
method = methods[method];
arguments = Array.prototype.slice.call(arguments, 1);
} else if (typeof(method) == 'object' || !method) {
method = methods.init;
} else {
$.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );
return this;
}

return method.apply(this, arguments);
};
})(jQuery);

此插件开发为对象级别插件开发。也可以

(function($){

　　$.fn.extend({

　　})

})(jQuery)

html中调用：$('input:checkbox').tukiCheck();

js代码三：

//tuki jquery ext
(function($, undefined){
var methods = {
checkall : function(){
var $chekcAllObj = $('#checkall');

if (undefined != $chekcAllObj) {
$chekcAllObj.click(function() {
var $this = $(this);
if ($this.attr('checked')) {
$this.siblings('input:checkbox').attr('checked', true);
} else {
$this.siblings('input:checkbox').attr('checked', false);
}
});
}
//return true;
}
};

$.tukiCheck = function(method) {
// Method calling logic
if (methods[method]) {
return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || ! method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' +  method + ' does not exist on jQuery.tukibox');
}
};
})(jQuery);

此插件开发为类级别开发，即直接为jquery类本身添加方法。

html中调用：$.tukiCheck('checkall');

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航