huanghaihua

最近项目中用到了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);

 

分类:

技术点:

相关文章:

  • 2021-08-02
  • 2022-01-25
  • 2021-10-29
  • 2022-12-23
  • 2021-10-26
  • 2021-11-27
  • 2021-09-17
猜你喜欢
  • 2021-10-15
  • 2021-05-05
  • 2022-12-23
  • 2022-12-23
  • 2021-04-02
  • 2021-09-17
  • 2021-10-09
相关资源
相似解决方案