最近项目中用到了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(\'<input type="checkbox" value="\'+item.value+\'"/>\'+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);