LazyForm jQuery plugin 定制您的CheckBox 

【 tulaoshi.com - Web开发 】

打包下载

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）

在下面浏览器下测试通过：Firefox, IE7, IE8, Google浏览器。 (IE6还是算了吧），其它浏览器还没试过。
目前刚添加了4个皮肤，添加新皮肤非常方便，您可以参考已添加的皮肤图片和css代码，相信您会很快搞定。

效果截图：
一、在没有使用LazyForm的情况下，在XP下运行截图如下

二、使用LazyForm(皮肤Blue)效果如下

三、使用LazyForm(皮肤Black)效果如下

四、皮肤Default

五、皮肤Gray

demo.html代码如下：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titledemo-lazyform/title
script type="text/javascript" src="js/jquery.min.js"/script
script type="text/javascript" src="js/lazyform.js"/script
link type="text/css" rel="stylesheet" href="css/blue/lazyform.css" id="lazyFormSkin" /
style type="text/css"
body
{
font: 12px Simsun, Arial, Helvetica, sans-serif;
line-height: 20px;
}
/style

script type="text/javascript"
$(function() {
$('#form1').submit(function() {
var skin = $('#ddlSkin option:selected').val();
$('#lazyFormSkin').attr('href', 'css/' + skin + '/lazyform.css');
skin = 'Skin: ' + skin;

var gender = 'Gender: ' +
$('input[name=gender]:checked').val();
var gender2 = 'Gender2: ' +
$('input[name=gender2]:checked').val();

var hobby = 'Hobby: ' +
($('#cbxBaskball').is(':checked') ？ $('#cbxBaskball').val() + ' ' : '') +
($('#cbxFootball').is(':checked') ？ $('#cbxFootball').val() + ' ' : '') +
($('#cbxSwimming').is(':checked') ？ $('#cbxSwimming').val() + ' ' : '');
var hobby2 = "Hobby2: " +
($('#cbxBaskball2').is(':checked') ？ $('#cbxBaskball2').val() + ' ' : '') +
($('#cbxFootball2').is(':checked') ？ $('#cbxFootball2').val() + ' ' : '') +
($('#cbxSwimming2').is(':checked') ？ $('#cbxSwimming2').val() + ' ' : '');

var country = 'Country: ' + $('#ddlCountry option:selected').text();
var country2 = 'Country2: ' + $('#ddlCountry2 option:selected').text();

$('#result').html(skin + 'br /' + gender + 'br /' + gender2 + 'br /' +
hobby + 'br /' + hobby2 + 'br /' + country + 'br /' + country2);

return false;
});
});
/script
/head

body
form id="form1" method="post" action="javascript:alert('success!');"
p
label for="Skin"Skin:/label
select id="ddlSkin"
option value="Blue"Blue/option
option value="Black"Black/option
option value="Default"Default/option
option value="Gray" Gray/option
/select
/p

p
label for="Gender"Gender:/label
br /
input type="radio" id="rdoMale" name="gender" value="Male" checked="checked" /
Male

br /
input type="radio" id="rdoFemale" name="gender" value="Female" /
Female
/p

p
label for="Gender"Gender2:/label
input type="radio" id="rdoMale2" name="gender2" value="Male2" /
Male2

input type="radio" id="rdoFemale2" name="gender2" value="Female2" checked="checked" /
Female2
/p


p
label for="Hobby"Hobby:/label
br /
input type="checkbox" id="cbxBaskball" value="Baskball" checked="checked" /
Baskball

br /
input type="checkbox" id="cbxFootball" value="Football" checked="checked" /
Football

br /
input type="checkbox" id="cbxSwimming" value="Swimming" /
Swimming
/p

p
label for="Hobby"Hobby2:/label
input type="checkbox" id="cbxBaskball12" value="Baskball2" checked="checked" /
Baskball12

input type="checkbox" id="cbxFootball2" value="Football2" /
Football2a

input type="checkbox" id="cbxSwimming2" value="Swimming2" checked="checked" /
Swimming2
/p

p
label for="Country"Country:/label
br /
select id="ddlCountry"
option value="China" selected="selected"China/option
option value="United States" United States/option
option value="Canada" Canada/option
option value="Holland"Holland/option
/select
/p

p
label for="Country"Country2:/label
select id="ddlCountry2" style="width: 350px;"
option value="China2"China2/option
option value="United States2" selected="selected"United States2/option
option value="Canada2" Canada2/option
option value="Holland2"Holland2/option
/select
/p

p
input type="submit" value="submit" /
/p

p id="result"/p
/form
/body
/html

从代码你就可以看到，LazyForm没有动您的Html和Css样式一根汗毛。
想让Select变长，设置个长度就可以了。
把LazyForm.js去掉，就是您的原样。没有任何改变。

LazyForm源码：
代码如下:
(function($) {
/* ------------------------------------------------------------------------
LazyForm 1.0
Copyright (c) 2009, ZhangPeng Chen, peng1988@gmail.com
------------------------------------------------------------------------- */
$.lazyform = $.lazyform || {};
$.extend($.lazyform, {
_inputs : null,
_selects: null,

init: function() {
_inputs = $('input[type=checkbox], input[type=radio]');
_inputs.each($.lazyform._initInput);

_selects = $('select');
_selects.each($.lazyform._initSelect);

$(document).click(function() {
$('div.select div.open').removeClass().next('ul').hide();
});
},

_initInput: function() {
var $self = $(this);
var self = this;
var radio = $self.is(':radio');

var id = radio ？ (self.type + '-' + self.name + '-' + self.id) : (self.type + '-' + self.id);
var className = self.type + (self.checked ？ '-checked' : '');
var hover = false;

var $span = $('span /')
.attr({
'id': id,
'class': className
})
.bind('mouseover mouseout', function() {
hover = !hover;
$span.attr('class', self.type + (self.checked ？ '-checked' : '') + (hover ？ '-hover' : ''));
})
.bind('click', function() {
if(radio) {
$('input[name=' + self.name + ']').each(function() {
$('#' + self.type + '-' + self.name + '-' + this.id).attr('class', self.type);
})
}

self.click();
$span.attr('class', self.type + (self.checked ？ '-checked' : ''));
});

$self.addClass('hidden').before($span);
},

_$openSelect: null,
_initSelect: function() {
var $self = $(this);
var self = this;

var selectWidth = $self.width();
var selectUlWidth = $self.width() - 2;

var $select = $('div /').attr('id', 'select-' + self.id).width(selectWidth).addClass('select');
var $selectItem = $('div /').append('span /');
var $selectItemText = $selectItem.children('span');
var $selectUl = $('ul /').width(selectUlWidth).hide();
var $selectLi = null;
var $hoverLi = null;

$self.children().each(function() {
var $tempLi = $('li /').append(this.text);
if(this.selected) {
$tempLi.addClass('hover');
$selectItemText.text(this.text);

$selectLi = $tempLi;
$hoverLi = $tempLi;
}
$selectUl.append($tempLi);

$tempLi
.bind('mouseover', function() {
$hoverLi.removeClass();
$tempLi.addClass('hover');
$hoverLi = $tempLi;
})
.bind('click', function() {
$self.children().each(function() {
if($hoverLi && this.text == $hoverLi.text()) {
$tempLi.addClass('hover');
this.selected = true;

$selectLi = $tempLi;
$hoverLi = $tempLi;
}
});

$selectItem.removeClass();
$selectItemText.text($selectLi.text());
$selectUl.hide();
});
});

$selectItem.click(function(e) {
if($.lazyform._$openSelect && $.lazyform._$openSelect != $select) {
$('#' + $.lazyform._$openSelect.attr('id') + ' div.open').removeClass().next('ul').hide();
}
$.lazyform._$openSelect = $select;

$selectItem.toggleClass('open');
if($selectItem.attr('class') == 'open') {
if($hoverLi != $selectLi) {
$hoverLi.removeClass();
$selectLi.attr('class', 'hover');
$hoverLi = $selectLi;
}
$selectUl.show();
} else {
$selectUl.hide();
}

e.stopPropagation();
});

$select.append($selectItem);
$select.append($selectUl);

$self.hide().before($select);
}
});

$(document).ready(function() {
$.lazyform.init();
});
})(jQuery);