自己动手写easyui的checkbox
最近项目中用到了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
1 (function ($) { 2 function createBox(me, options) { 3 me.html(''); 4 5 if(options.data){ 6 $.each(options.data,function(index,item){ 7 me.append(''+item.text); 8 }); 9 registerEvent(me); 10 } 11 } 12 13 function registerEvent(me){ 14 $(me).children().on('click',function(){ 15 if($(this).attr('checked')){ 16 $(this).removeAttr('checked'); 17 }else{ 18 $(this).attr('checked','checked'); 19 } 20 }); 21 } 22 23 $.fn.checkbox = function(options, param){ 24 if (typeof options == 'string'){ 25 var method = $.fn.checkbox.methods[options]; 26 27 if (method){ 28 return method(this, param); 29 } else { 30 return this.combo(options, param); 31 } 32 } 33 34 options = options || {}; 35 createBox(this,options); 36 }; 37 38 $.fn.checkbox.methods={ 39 setValue:function(me,para){ 40 me.html(''); 41 42 createBox(me,{data:para}); 43 }, 44 getValue:function(me,para){ 45 var values=new Array(); 46 47 $(me).children().each(function(index,item){ 48 if($(item).attr('checked')=='checked'){ 49 values.push($(item).attr('value')); 50 } 51 }); 52 53 return values; 54 }, 55 checked:function(me,para){ 56 $(me).children().each(function(index,item){ 57 if (para.indexOf($(item).attr('value')) > -1) { 58 if ($(item).attr('checked') != 'checked') { 59 $(item).click(); 60 } 61 } else { 62 $(item).removeAttr('checked'); 63 } 64 }); 65 } 66 }; 67 })(jQuery);