标签：
最近项目中用到了easyui这个框架，找了一圈也没有找到checkbox list控件，被迫只能自己实现了，为了便于复用，自己封装了下，有需要的，直接拿去用吧。有意见或建议的，欢迎指教啊。
调用示例
<html> <head> <title></title> <meta charset=‘utf8‘> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.checkbox.js"></script> </head> <body> <div class=‘easyui-checkbox‘ id=‘test‘> </div> <div id=‘showValues‘></div> <div> <input type=‘button‘ id=‘btnGetValue‘ value=‘获取选中值‘> </div> <script type="text/javascript"> $().ready(function function_name (argument) { //初始化传值 /*$(‘#test‘).checkbox({data:[ {text:‘星期天‘,value:‘1‘}, {text:‘星期一‘,value:‘2‘}, {text:‘星期二‘,value:‘3‘} ]});*/ //初始化 $(‘#test‘).checkbox(); //setValue设置checkbox项 $(‘#test‘).checkbox(‘setValue‘,[ {text:‘星期天‘,value:‘1‘}, {text:‘星期一‘,value:‘2‘}, {text:‘星期二‘,value:‘3‘} ]); //checked设置默认选中项 $(‘#test‘).checkbox(‘checked‘,[‘2‘]); $(‘#btnGetValue‘).on(‘click‘,function(){ //getValue获取已选择的checkbox项的值 var checked=$(‘#test‘).checkbox(‘getValue‘); $(‘#showValues‘).html(‘‘); $(‘#showValues‘).html(checked.join(‘,‘)); }); }); </script> </body> </html>
实现源码 jquery.checkbox.js
(function($){ function createBox(me,options){ if(options.data){ $.each(options.data,function(index,item){ me.append(‘<input type="checkbox" value="‘+item.value+‘"/>‘+item.text); }); registerEvent(me); } } function registerEvent(me){ $(me).children().on(‘click‘,function(){ if($(this).attr(‘checked‘)){ $(this).removeAttr(‘checked‘); }else{ $(this).attr(‘checked‘,‘checked‘); } }); } $.fn.checkbox = function(options, param){ if (typeof options == ‘string‘){ var method = $.fn.checkbox.methods[options]; if (method){ return method(this, param); } else { return this.combo(options, param); } } options = options || {}; createBox(this,options); }; $.fn.checkbox.methods={ setValue:function(me,para){ me.html(); createBox(me,{data:para}); }, getValue:function(me,para){ var values=new Array(); $(me).children().each(function(index,item){ if($(item).attr(‘checked‘)==‘checked‘){ values.push($(item).attr(‘value‘)); } }); return values; }, checked:function(me,para){ $(me).children().each(function(index,item){ if(para.indexOf($(item).attr(‘value‘))>-1){ if($(item).attr(‘checked‘)!=‘checked‘){ $(item).click(); } } }); } }; })(jQuery);
标签：
原文地址：http://www.cnblogs.com/huanghaihua/p/5035596.html
