最近项目中用到了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. js 得到当前季度

    Date.prototype.getQuarter = function() { var month = this.getMonth(); if(month < 3) { return '第一季 ...

  2. 面向对象设计模式之Facade外观模式（结构型）

    动机:有些系统组件的客户和组件中各种复杂的子系统有了过多的的耦合,随着外部客户程序  和个子系统的演化,这种过多的耦合面临很多变化的挑战:如何简化外部客户程序和系统的交互接口?  如何将外部客户程序的 ...

  3. IE6的bug

    借鉴http://css.doyoe.com/ 问题和经验列表,里面应有尽有.写几个常见的: 1.解决IE6及更早浏览器浮动时产生双倍边距的BUG display:inline 2.如何解决IE6下的 ...

  4. 嵌入式 python之str操作

    1.字符串的对齐方式:①:center(int[,str])>>> string = 'Fishhat'>>> string.center(55)'         ...

  5. c语言里用结构体和指针函数实现面向对象思想

    一.基础研究 观察如下两个程序a.c和b.c: A.c: B.c: 这两个程序都是要实现在屏幕上第10行40列打印一个绿色的字符c: 这两个程序的数据组织方式是一样的,都是使用结构体,而且对共性和个性 ...

  6. oracle中的日期加减法

    --加法 ) from dual; --加1年 ) from dual; --加1月 ,'yyyy-mm-dd HH24:MI:SS') from dual; --加1星期 ,'yyyy-mm-dd ...

  7. 科通芯城:用B2C的方式做B2B

    上线两年,科通芯城的年收入有望突破50亿,一个传统分销商用2c的方式做b2b,也能进行自我革命. 文 | 王海天 这个网站的名字叫科通芯城,于2011年下半年在深圳正式上线,卖的商品是IC元器件,包括 ...

  8. rabbitMQ入门

    1 安装 1.1 首先 arbbitmq是用爱尔兰这种语言去编写的,所以,需要这种语言支持,那就需要下载以下几个包去安装来搭建环境 下载并安装erlang,http://www.erlang.org/ ...

  9. Java Tomcat SSL 服务端/客户端双向认证

    借花献佛:http://www.blogjava.net/icewee/archive/2012/06/04/379947.html

  10. 产生文件命令touch,echo,cat<<EOF>test,less,more,tail,head

    . 输出命令 echo,cat,管道(|),tee,重定向(>, >>)等 . 创建一个文件:用 touch.echo.cat.tee, 重定向(>, >>)等 [ ...