基于jquery的checkbox下拉框插件代码


Posted in Javascript onJune 25, 2010

option_check.js代码 :

/***************************************** 
调用方法为: 
Jselect($("#inputid"),{ 
bindid:'bindid', 
hoverclass:'hoverclass', 
optionsbind:function(){return hqhtml();} 
}); 
inputid为下拉框要绑定的文本框id 
bindid为点击弹出/收回下拉框的控件id 
hoverclass为鼠标移到选项时的样式 
hqhtml为绑定的数据 
******************************************/ 
(function($){ 
$.showselect = { 
init : function(o,options){ 
var defaults = { 
bindid : null, //事件绑定在bindid上 
hoverclass:null, //鼠标移到选项时样式名称 
optionsbind:function(){} //下拉框绑定函数 
} 
var options = $.extend(defaults,options); 
if(options.optionsbind!=null){//如果绑定函数不为空 
this._setbind(o,options); 
} 
if(options.bindid!=null){ 
this._showcontrol(o,options); 
} 
}, 
_showcontrol:function(o,options){//控制下拉框显示 
$("#"+options.bindid).toggle(function(){ 
$(o).next().slideDown(); 
},function(){ 
$(o).next().slideUp(); 
}) 
}, 
_setbind:function(o,options){//绑定数据 
var optionshtml="<div style=\"z-index: 999; position: absolute;\">" 
+options.optionsbind()+"</div>"; 
$(o).after(optionshtml); 
var offset= $(o).offset(); 
var w=$(o).width(); 
$(o).next().css({top:offset.top+$(o).height()+7,left:offset.left,width:w}); 
if(options.hoverclass!=null){ 
$(o).next().find("tr").hover(function(){$(this).addClass(options.hoverclass);}, 
function(){$(this).removeClass(options.hoverclass);}); 
} 
$(o).next().find("input[type=checkbox]").filter("[lang=checked]").each(function(){$(this).attr("checked","checked");}); 
$(o).next().find("input[type=checkbox]").click(function(){ 
var $ckoption=$(this).attr("checked"); 
if($ckoption){ 
$(this).attr("checked",""); 
}else{ 
$(this).attr("checked","checked"); 
} 
}); 
$(o).next().find("tr").click(function(){ 
var $ckflag=$(this).find("input[type=checkbox]"); 
if($ckflag.attr("checked")){ 
$ckflag.attr("checked",""); 
$ckflag.attr("lang",""); 
} 
else{ 
$ckflag.attr("checked","checked"); 
$ckflag.attr("lang","checked"); 
} 
var selarray=new Array(); 
$(o).next().find("input[type=checkbox]").each(function(){ 
if($(this).attr("checked")) 
selarray.push($(this).parent().next().text()); 
}); 
$(o).val(selarray.join(',')); 
}); 
$(o).next().hide(); 
} 
} 
Jselect = function(o,json){ 
$.showselect.init(o,json); 
}; 
})(jQuery);

html代码:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="option_check.js"></script> 
<style type="text/css"> 
.hover 
{ 
background-color: Blue; 
color: White; 
} 
</style> 
<script type="text/javascript"> 
$(function(){ 
Jselect($("#txt_wbk"),{ 
bindid:'txt_wbk', //可绑定到按钮上,此处为点击文本框显示下拉框 
hoverclass:'hover', 
optionsbind:function(){return hqhtml();} 
}); 
}) 
function hqhtml(){//此处可在数据库中取值后拼接html,注意:预选项加上 lang='checked'属性 
var optionshtml="<table style='width:100%; background-color: Red' cellpadding=\"0\" cellspacing=\"0\" >“ 




+”<tr><td style='width:20px'><input type=\"checkbox\" value='1' /></td><td>第一项</td></tr>" 

  +"<tr><td><input type=\"checkbox\" value='2' lang='checked'/></td><td>第二项</td></tr>" 

 +"<tr><td><input type=\"checkbox\" value='3' /></td><td>第三项</td></tr>" 
+"<tr><td><input type=\"checkbox\" value='4' /></td><td>第四项</td></tr></table>"; 
return optionshtml; 
} 
</script> 
<div> 
<input id="txt_wbk" type="text" style="width: 200px;" />下拉框测试 
</div>
Javascript 相关文章推荐
9个JavaScript评级/投票插件
Jan 18 Javascript
一个XML格式数据转换为图表的例子
Feb 09 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
vue组件tabbar使用方法详解
Nov 06 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 Javascript
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 #Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 #Javascript
javascript面向对象编程(一) 实例代码
Jun 25 #Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 #Javascript
jQuery对象和DOM对象使用说明
Jun 25 #Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 #Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 #Javascript
You might like
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
php基础知识:类与对象(5) static
2006/12/13 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
wxPython使用系统剪切板的方法
2015/06/16 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
python+pyqt5编写md5生成器
2019/03/18 Python
大数据分析用java还是Python
2020/07/06 Python
澳大利亚相机之家:Camera House
2017/11/30 全球购物
QA工程师岗位职责
2013/11/20 职场文书
自我评价格式
2014/01/06 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
市场部经理岗位职责
2015/02/02 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
护理工作心得体会
2016/01/22 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python
MySQL 可扩展设计的基本原则
2021/05/14 MySQL