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

    1.递归 利用递归实现阶乘(1*2*3*4*5*6*7) def func(num): if num == 1: return 1 return num * func(num-1) x = func( ...

  2. 人见人爱a*b 杭电2035

    求A^B的最后三位数表示的整数.说明:A^B的含义是“A的B次方”   Input 输入数据包含多个测试实例,每个实例占一行,由两个正整数A和B组成(1<=A,B<=10000),如果A= ...

  3. python设计模式之观察者模式

    观察者模式 当对象间存在一对多关系时,则使用观察者模式(Observer Pattern).比如,当一个对象被修改时,则会自动通知它的依赖对象.观察者模式属于行为型模式. 观察者模式在状态检测和事件处 ...

  4. 转：VS2010与SVN

    在VS2010中使用SVN,必须先安装SVN的客户端,再安装VisualSVN(SVN的插件).必须保证两者的版本不冲突,我现在安装的是TortoiseSVN-1.7.10.23359-win32-s ...

  5. EMV规范 ---ISO7816 T=0协议的时间特性

    复位应答期间: 字符间的时间间隔最小是12etu,最大是9600etu,但整个ATR不得超过19200etu(TS的起始沿到最后一个字符的起始沿 从卡片发出的连续字符其最小时间间隔为12etu,但是终 ...

  6. 多线程同步循环打印和Guarded suspension 模式

     * 迅雷笔试题: * 有三个线程ID分别是A.B.C,请有多线编程实现,在屏幕上循环打印10次ABCABC…  由于线程执行的不确定性,要保证这样有序的输出,必须控制好多线程的同步. 线程同步有两种 ...

  7. 查找最小的K个元素，使用最大堆。

    查找最小的K个元素,使用最大堆,具体代码如下: #define _CRT_SECURE_NO_WARNINGS #include <iostream> using namespace st ...

  8. 【转】Java中本地时间的获取方法--不错

    原文网址:http://highforest.blog.51cto.com/125539/842496/ 熟悉Oracle数据库的人,应该知道:select to_char(sysdate,'yyyy ...

  9. SWFObject: 基于Javascript的Flash媒体版本检测与嵌入模块

    原文地址:http://www.awflasher.com/flash/articles/swfobj.htm SWFObject: 基于Javascript的Flash媒体版本检测与嵌入模块原文:S ...

  10. Java学习日记-5 关键字static和final 以及接口

    乱入:表达式中的自动类型转换 char,short,byte都升级为int类型进行运算,结果为int,但其原变量类型并不改变. 所以,byte b = 10;  b = b*b; 编译时会报错.但是写 ...