编写jQuery插件来扩展checkbox

本文主要实现两个功能,第一使用图片代替html checkbox一成不变的样式并可以使用checkbox的正常功能,其次是前者的基础之上实现checkbox的全选,全不选和反选.同时也捎带介绍了jQuery最基本的插件写法.


jQuery插件的编写可以通过jQuery.fn.extend方法来实现

)

在接下来的代码中,我们就可以在jQuery对象中直接使用这两个方法了

)

接下来介绍如何编写一个简单的checkbox插件

首先实现checkbox的单选以及改变checkbox的样式,我们需要准备两张图片,一张是选中时,另一张是未选中时,实现的原理很简单,首先把checkbox的原本样式隐藏,然后构造一个<img>对象,分别赋于src和name属性,添加click事件,实现在选择的时候图片替换.最后插入这个构造对象.

            }

完成之后,如何使用呢?

            $('input[@type=checkbox]').checkbox(
                {
                    checked: 'checked.gif', 
                    unchecked: 'unchecked.gif'
                });

把它绑定到$(function(){})中

第二步,实现全选,全不选和单选,网上已经有很多这样的例子了,在这里我添加了一行图片替换的代码来模拟选择和取消选择.

                    }

绑定下面的代码到$(function(){})中使用

            // 全选
);

到这里,我们就可以大功告成了.如果你使用过163的信箱,利用上述代码稍微修改下应该就可以很简单的实现它的checkbox选择了吧? :)

参考资料:
1. http://kawika.org/jquery/checkbox/
2. http://bbs.jquery.org.cn/thread-130-1-1.html

附完整代码如下:

>