jQuery Easyui扩展CheckBox组件

/**
 * 复选框按钮
 */
;(function($) {
    function checkToUI(target, checked ){
        var tar = $(target);
        var box = tar.next('span');
        var opts = tar.data('opts');
        tar.prop('checked', !!checked );
        if( checked ) {
            box.css('background-color', opts.checkedBoxColor );
            box.text(opts.checkText );
        }
        else {
            box.css('background-color', opts.uncheckedBoxColor);
            box.text('');
        }
    }
    function disable(target) {
        var tar = $(target);
        var opts = tar.data('opts');
        var box = tar.next('span');
        var body = tar.parent();

        tar.attr('disabled', true );
        body.off('click').off('mouseover').off('mouseout');
        var lab = body.find('span:last');
        if( tar.prop('checked'))
            box.css('background-color', opts.disableBoxColor);
        box.css('border-color', opts.disableBorderColor);
        lab.css('color', opts.disableTextColor);
    }
    function enable(target) {
        var tar = $(target);
        var opts = tar.data('opts');
        var box = tar.next('span');
        var body = tar.parent();
        var lab = body.find('span:last');

        tar.removeAttr('disabled');
        checkToUI( target, tar.prop('checked'));
        lab.css('color', opts.textColor );
        body.on('click', function(){
            if( tar.prop('checked')) {
                tar.prop('checked', false );
                box.css('background-color', opts.uncheckedBoxColor);
                box.text('');
            }
            else {
                tar.prop('checked', true );
                box.css('background-color', opts.checkedBoxColor );
                box.text(opts.checkText );
            }
        }).on('mouseover',function(){
            box.css('border-color', opts.mouseOnBoxBoderColor);
            lab.css('color', opts.mouseOnTextColor);
        }).on('mouseout',function(){
            box.css('border-color', opts.boxBorderColor);
            lab.css('color', opts.textColor);
        });
    }
    function init( target, opts ) {
        var tar = $(target);
        tar.data('opts', opts );

        var body = $('<span></span>')
            .css('margin', '0')
            .css('padding', '0')
            .css('display', 'inline-block')
            .css('height', opts.height === 0 ? 'auto' : opts.height )
            .css('width', opts.width === 0 ? 'auto' : opts.width )
            .css('vertical-align', 'middle')
            .css('cursor', 'pointer')
            .css('text-align', opts.align)
            .off('click')
            .off('mouseover')
            .off('mouseout')
            .insertBefore(tar);

        tar.attr('type', 'hidden')
            .css('display', 'none')
            .appendTo(body);

        var boxHeight = opts.height === 0 ? 16 : opts.height;
        $('<span></span>')
            .css('vertical-align', 'middle')
            .css('margin', '0 2px 0 0')
            .css('padding', '0')
            .css('width', boxHeight + 'px')
            .css('height', boxHeight + 'px')
            .css('display', 'inline-block')
            .css('border-color', opts.boxBorderColor)
            .css('border-radius', '4px')
            .css('border-style', 'solid')
            .css('border-width', '1px')
            .css('font-size', opts.checkTextSize + 'px')
            .css('text-align', 'center')
            .css('line-height', boxHeight + 'px' )
            .css('overflow', 'hidden')
            .css('color', opts.boxTextColor)
            .css('font-weight', 'bold')
            .appendTo(body);

        if( opts.iconCls !== '' ) {
            $('<span></span>')
                .css('vertical-align', 'middle')
                .css('margin', '0 2px')
                .css('padding', '0')
                .css('width', '16px')
                .css('height', '16px')
                .css('display', 'inline-block')
                .addClass(opts.iconCls)
                .appendTo(body);
        }
        $('<span></span>')
            .css('vertical-align', 'middle')
            .css('margin', '0 0 0 2px')
            .css('padding', '0')
            .css('display', 'inline-block')
            .text(opts.text)
            .css('color', opts.textColor )
            .appendTo(body);

        enable( target );
    }

    $.fn.hxCheckbox = function( opts, param ) {
        if (typeof opts === 'string') {
            var method = $.fn.hxCheckbox.methods[opts];
            if (method) {
                return method(this, param);
            }
        }
        else {
            opts = $.extend({}, $.fn.hxCheckbox.defaults, opts || {} );
            return this.each(function () {
                init( this, opts);
            });
        }
    };
    $.fn.hxCheckbox.methods = {
        getValue: function(tar){
            return $(tar[0]).prop('checked');
        },
        setValue: function(tar, param){
            return tar.each(function(){
                checkToUI(this, param);
            });
        },
        clear: function(tar){
            return tar.each(function(){
                checkToUI(this, false);
            });
        },
        disable: function(tar){
            return tar.each(function(){
                disable(this);
            });
        },
        enable: function(tar) {
            return tar.each(function(){
                enable(this);
            });
        },
        show: function(tar){
            return tar.each(function(){
                $(this).parent().show();
            });
        },
        hide: function(tar){
            return tar.each(function(){
                $(this).parent().hide();
            });
        },
        destory: function(tar){
            return tar.each(function(){
                $(this).parent().off('click').off('mouseover').off('mouseout').remove();
            });
        }
    };
    $.fn.hxCheckbox.defaults = {
        textColor: '#31708f',
        mouseOnTextColor: 'orangered',
        boxBorderColor: '#95B8E7',
        mouseOnBoxBoderColor: 'orangered',
        uncheckedBoxColor: 'unset',
        checkedBoxColor: 'darkorange',
        boxTextColor: 'white',
        disableBorderColor: 'grey',
        disableBoxColor: '#8d8d8d',
        disableTextColor: 'grey',
        checkText: '√',
        checkTextSize: 12,
        align: 'left',
        text: '',
        iconCls: '',
        width: 0,
        height: 0
    };
})(jQuery);

使用方法：

<input id="check_box"/>

<script type=text/javascript>
    $(function(){
        $('#check_box').hxCheckBox({
            text: '复选框测试',
            checkText: '●', // 默认为'√'
            //.....其他的属性，颜色等，请参照源码中 default值
        });
    });
</script>