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" 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[];
if (methods[method]) {
method = methods[method];
arguments = Array.prototype.slice.call(arguments, );
} 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, ));
} 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');
jquery插件开发(checkbox全选的简单实例)的更多相关文章
- jQuery实现CheckBox全选、全不选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery设置checkbox全选（区别jQuery版本）
jQuery设置checkbox全选在网上有各种文章介绍,但是为什么在我们用他们的代码的时候就没有效果呢? 如果你的代码一点错误都没有,先不要急着怀疑人家代码的正确性,也许只是人家跟你用的jQuery ...
- jquery中checkbox全选失效的解决方法
这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下 如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...
- 利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
- Jquery 组 checkbox全选checkbox
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- 解决jquery操作checkbox全选全不选无法勾选问题
最近在学习中使用jquery操作checkbox,使用下面方法进行全选.反选:$("input[name='checkbox']").attr("checked" ...
- jquery实现checkbox全选和全部取消，以及获取值
在后台管理中经常会遇到列表全选和取消的功能,如评论审核.申请等,用到的html标记就是checkbox.我用的是mysql数据库,代码如下: <!DOCTYPE html PUBLIC &quo ...
- jquery的checkbox 全选和全不选
今天写了一个checkbox的全选和全不选的功能: var check_all=function(){ if(this.checked){ //alert($(".adv_check_num ...
- jQuery实现checkbox全选反选及删除等操作
1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...
随机推荐
- RPi 2B 自动发送获取的IP到固定邮箱
/************************************************************************* * RPi 2B 自动发送获取的IP到固定邮箱 * ...
- C# 中的枚举类型 enum （属于值类型）
原文 C# 中的枚举类型 enum (属于值类型) C# 支持两种特殊的值类型:枚举和结构. 声明枚举:声明时要声明所有可能的值. using System; using System.Collect ...
- 把之前写的几个项目放到了github上
之前有的源码放在我的电脑里不知道什么时候就没了,满满都是回忆啊,怪可惜的. https://github.com/redclock/Adv-Game:一个java游戏 https://github.c ...
- USB HID报告及报告描述符简介
在USB中,USB HOST是通过各种描述符来识别设备的,有设备描述符,配置描述符,接口描述符,端点描述符,字符串描述符,报告描述符等等.USB报告描述符(Report Descriptor)是HID ...
- [原]Java面试题-输入一个整型数组，找出最大值、最小值，并交换。
[Date]2013-09-19 [Author]wintys (wintys@gmail.com) http://wintys.cnblogs.com [Content]: 1.面试题 输入一个整型 ...
- 【暑假】[实用数据结构]UVAlive 3644 X-Plosives
UVAlive X-Plosives 思路: “如果车上存在k个简单化合物,正好包含k种元素,那么他们将组成一个易爆的混合物” 如果将(a,b)看作一条边那么题意就是不能出现环,很容易联想到K ...
- algorithm@ O(3/2 n) time to findmaximum and minimum in a array
public static int[] max_min(int[] a){ //res[0] records the minimum value while res[1] records the ma ...
- CentOS 6.5 安装配置VSFTP
1.下载安装VSFTP 首先查看当前系统是否已经安装VSFTP,若未安装则使用yum安装. chkconfig --list | grep vsftpd #查看是否安装 yum install vsf ...
- 初识cocos2d-x-从环境配置到整体框架
前言 ACM生涯在带着些许遗憾中结束了.春招的时候找了一份游戏开发的工作,现在学习cocos2dx中. 从ACM竞赛到实际项目开发的学习,第一感觉就是不适应,虽然感觉实际项目的确要比ACM简单的多.最 ...
- Turn Your Raspberry Pi Into a WiFi Hotspot with Edimax Nano USB EW-7811Un (RTL8188CUS chipset)
http://www.daveconroy.com/turn-your-raspberry-pi-into-a-wifi-hotspot-with-edimax-nano-usb-ew-7811un- ...