最近项目中用到了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的闭包

    JavaScript的闭包有两个用途:一个是访问函数内部的变量:另一个是让变量的值在作用域内保持不变.函数是JavaScript 中唯一有作用域的对象,因此JavaScript的闭包依赖于函数实现,下 ...

  2. QComboBox实现复选功能

    需求: 下拉列表有复选功能 不可编辑 显示所有选中项   关于QComboBox的复选功能有几种方案: QStandardItemModel + QStandardItem QListWidget + ...

  3. php while循环 指定显示内容 例如不想显示前10条和后10条

    <?php //查询信息总的条数 $db_num = query_num("表","where 1=1"); //每页显示的条数 $page_size=2 ...

  4. python中的builtin函数详解-第二篇

    classmethod(function) 这里不过多说明这个builtin方法的具体用法,python的文档和help函数已经给了这个方法充足的使用说明,所以我这里要说的时关于 classmetho ...

  5. C++ Primer chap7

    /* 第七章7.1: */ //#include<iostream> //#include<string> //using std::cin; //using std::cou ...

  6. poj A Round Peg in a Ground Hole

    http://poj.org/problem?id=1584 #include<cstdio> #include<cstring> #include<cmath> ...

  7. POJ2632 Crashing Robots（模拟）

    题目链接. 分析: 虽说是简单的模拟,却调试了很长时间. 调试这么长时间总结来的经验: 1.坐标系要和题目建的一样,要不就会有各种麻烦. 2.在向前移动过程中碰到其他的机器人也不行,这个题目说啦:a ...

  8. 深入JS系列学习4

    深入JS系列学习4 Javascript 装载和执行 明白了JS的装载和执行,没有给出很好的解决方案,在IE下可用defer属性: 浏览器对于Javascript的运行有两大特性:1)载入后马上执行, ...

  9. 【模拟】HDU 5752 Sqrt Bo

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5752 题目大意: 定义f(n)=⌊√n⌋,fy(n)=f(fy-1(n)),求y使得fy(n)=1. ...

  10. ExecuteNonQuery返回负数

    用 ExecuteNonQuery 执行sql语句"select * from table where id=@id"如果检索出符合条件的ID ExecuteNonQueue 会返 ...