最近项目中用到了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. 50 Pow(x, n)(求x的n次方Medium)

    题目意思:x为double,n为int,求x的n次方 思路分析:直接求,注意临界条件 class Solution { public: double myPow(double x, int n) { ...

  2. ActiveX相关

    ActiveX 1.创建ActiveXhttp://blog.csdn.net/fww330666557/article/details/6533118 继承IObjectSafety接口http:/ ...

  3. Python异常的使用

    伪代码: try: 出错部分的代码...... except Exception as e: print '404网页' #Exception是所有错误类型的父类,包括所有出错信息 finally: ...

  4. 如何在一台机子上启动两个TOMCAT

    同时启动两个tomcat设置,具体如下: 1.不要设置CATALINA_HOME 2.分别修改安装目录下的conf子目录中的server.xml文件: a.修改http访问端口为不同的端口,将8080 ...

  5. GIve Me A Welcome Hug!

    类似于初来乍到,和大家打个招呼,并矫情的希望路人也能回赠我一个welcome hug. 到了这种园子那一定是做CS相关的了,一直以为如果能够坚持写技术博客,那一定会对自己的内力有十足的提升.借用一位前 ...

  6. [转]C# FileSystemWatcher监控指定文件或目录的文件的创建、删除、改动、重命名等活动

    觉得这个很常用..比如一些软件.   http://www.rabbit8.cn/DoNet/407.html   FileSystemWatcher控件主要功能: 监控指定文件或目录的文件的创建.删 ...

  7. 极简易版专家聊天程序--JAVA练手

    呵呵,用JAVA包开发SOCKET连接,是很简单的呢~~~ DailyAdviceServer.java import java.io.*; import java.net.*; public cla ...

  8. 【转】Android理解：显式和隐式Intent---- try catch

    原文网址:http://blog.csdn.net/xiao__gui/article/details/11392987 Intent是Android初学者比较难理解的一个东西.我这里以通俗易懂的语言 ...

  9. 3Sum Closest——LeetCode

    Given an array S of n integers, find three integers in S such that the sum is closest to a given num ...

  10. 【Android官方Training教程】Getting Started部分学习笔记

    Getting Started Welcome to Training for Android developers. Here you'll find sets of lessons within ...