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

         me.html('');

         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();

                     }

                 } else {

                     $(item).removeAttr('checked');

                 }

             });

         }

     };

 })(jQuery);

自己动手写easyui的checkbox的更多相关文章

  1. 【原创】自己动手写控件----XSmartNote控件

    一.前面的话 在上一篇博文自己动手写工具----XSmartNote [Beta 3.0]中,用到了若干个自定义控件,其中包含用于显示Note内容的简单的Label扩展控件,用于展示标签内容的labe ...

  2. 【原创】自己动手写工具----XSmartNote [Beta 3.0]

    一.前面的话 在动笔之前,一直很纠结到底要不要继续完成这个工具,因为上次给它码代码还是一年多之前的事情,参考自己动手写工具----XSmartNote [Beta 2.0],这篇博文里,很多园友提出了 ...

  3. 【原创】自己动手写工具----XSmartNote [Beta 2.0]

    一.前面的话 在上一篇自己动手写工具----XSmartNote中,我简单介绍了这个小玩意儿的大致界面和要实现的功能,看了一下园子里的评论,评价褒贬不一,有人说“现在那么多云笔记的工具”,“极简版ev ...

  4. 【原创】自己动手写工具----签到器[Beta 2.0]

    一.前面的话 上一篇中基本实现了简单的签到任务,但是不够灵活.在上一篇自己动手写工具----签到器的结尾中,我设想了几个新增功能来提高工具的灵活程度,下面把新增功能点列出来看看: (1)新增其他的进程 ...

  5. 自己动手写ORM的感受

    之前看到奋斗前辈和时不我待前辈的自己动手写ORM系列博客,感觉讲解的通俗易懂,清晰透彻.作为一个菜鸟,闲来也想着自己写一个ORM,一来加深自己对 ORM的理解,以求对EF,NHibernate等ROM ...

  6. 自己动手写插件底层篇—基于jquery移动插件实现

    序言 本章作为自己动手写插件的第一篇文章,会尽可能的详细描述一些实现的方式和预备知识的讲解,随着知识点积累的一点点深入,可能到了后期讲解也会有所跳跃.所以,希望知识点不是很扎实的读者或者是初学者,不要 ...

  7. Python - 动手写个ORM

    Python - 动手写个ORM 任务: 模拟简单的ORM - Object Relational Mapping 为model添加create方法 代码很简单,直接上 字段类型类 class Fie ...

  8. 【转】自己动手写SC语言编译器

    自序 编译原理与技术的一整套理论在整个计算机科学领域占有相当重要的地位,学习它对程序设计人员有很大的帮助.我们考究历史会发现那些人人称颂的程序设 计大师都是编译领域的高手,像写出BASIC语言的BIL ...

  9. 自己动手写CPU之第九阶段（8）——MIPS32中的LL、SC指令说明

    将陆续上传新书<自己动手写CPU>,今天是第47篇. 9.7 ll.sc指令实现思路 9.7.1 实现思路 这2条指令都涉及到訪问链接状态位LLbit,能够将LLbit当做寄存器处理,ll ...

随机推荐

  1. 初涉JavaScript模式 (13) : 代码复用 【上】

    引子 博客断了一段时间,不是不写,一是没时间,二是觉得自己沉淀不够,经过一段时间的学习和实战,今天来总结下一个老生常谈的东西: 代码复用. 为何复用 JS门槛低,故很多人以为写几个特效就会JS,其实真 ...

  2. C#.net 货币格式转换

    /// <summary> /// 输入Float格式数字,将其转换为货币表达方式 /// </summary> /// <param name="ftype& ...

  3. javascript获得给定日期的前一天的日期

    /** * 获得当前日期的前一天 */ function getYestoday(date){ var yesterday_milliseconds=date.getTime()-1000*60*60 ...

  4. js 鼠标双击滚动单击停止

    <!DOCTYPE html> <html> <head> <title>双击滚动代码</title> <script src=&qu ...

  5. struts2.xml的配置与技巧

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-/ ...

  6. FileUpload 改变控件显示的文字

    浏览

  7. hdu 4407 Sum

    http://acm.hdu.edu.cn/showproblem.php?pid=4407 题意:给定初始n个数1..n,两个操作,①1 x y p  询问第x个数到第y个数中与p互质的数的和; ② ...

  8. 7.2 Database Backup Methods 数据备份方法:

    7.2 Database Backup Methods 数据备份方法: 本节总结了一些常用的备份方法: 使用MySQL Enterprise Backup 进行Hot Backup MySQL Ent ...

  9. 【转】Android点击空白区域，隐藏输入法软键盘

    原文网址:http://www.2cto.com/kf/201505/401382.html 很多时候,我们在使用应用时,会出现输入法软键盘弹出的问题,通常情况下,我们默认会使用户点击返回键或者下一步 ...

  10. 【转】linux内核调试技巧之一 dump_stack

    原文网址:http://blog.csdn.net/dragon101788/article/details/9419175 在内核中代码调用过程难以跟踪,上下文关系复杂,确实让人头痛 调用dump_ ...