div仿checkbox表单样式美化及功能

div仿checkbox表单样式美化及功能（checkbox的样式不好看）素材在底部：

效果图：

window.css

.bj {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 1px;
	width: 100 % ;
	height: 980px;
	z - index: 9;
	background - color: #000;
	filter: alpha(opacity = 50); - moz - opacity: 0.5; - khtml - opacity: 0.5;
	opacity: 0.5;
}

.window {
	position: absolute;
	top: 106px;
	left: 33 % ;
	width: 466px;
	background - color: #fff;
	color: #000;
	border - bottom: 1px solid#dbdcdd;
	padding - bottom: 8px;
	overflow: hidden;
	z - index: 10;

}.window.top {
	width: 416px;
	padding: 0px 25px 0 25px;
	height: 48px;
	line - height: 48px;
	font - size: 18px;
	background - color: #ececec;
	border - bottom: 1px solid#d8d8d8;
	overflow: hidden;
}.window.top.close {
	float: right;
	margin - top: 14px;
}.window.top span {
	padding: 0 6px;
}

.window.add {
	width: 394px;
	margin: 0 auto;
	padding - top: 10px;
	font - size: 15px;
	color: #686868;
	overflow: hidden;
}.window.add dd,
.window.add dt {
	width: 100 % ;
	padding - bottom: 8px;
	line - height: 38px;
	overflow: hidden;
}.window.add span {
	float: left;
	width: 69px;
	overflow: hidden;
}.window.add dd input {
	width: 314px;
	height: 36px;
	line - height: 36px;
	border: 1px solid#c9c5c1;
	background - color: #f2f2f2;
	font - family: "微软雅黑",
	"宋体";
	font - size: 15px;
	color: #686868;
}.window.add dt input {
	vertical - align: middle;
	margin - right: 10px;
}.window.add dt label {
	margin - right: 10px;
	margin - left: 20px;
}.window.add dt label.perlabel {
	margin - left: 0px;
}.window.add dd input.two {
	width: 192px;
	height: 33px;
	line - height: 33px;
	border: none;
	background: url('../images/input09.gif') no - repeat;
	margin - right: 13px;
}.window.add dd a {
	margin - left: 10px;
	font - size: 16px;
}.window.add dt.button {
	text - align: center;
	padding - top: 8px;
}.window.add dt.button input {
	width: 103px;
	height: 41px;
	line - height: 39px;
	text - align: center;
	border: none;
	background: url('../images/input06.gif') no - repeat;
	margin: 0 5px;
	font - family: "微软雅黑",
	"宋体";
	font - size: 15px;
	color: #686868;
}.window.post {
	width: 420px;
}.window.post span {
	width: 86px;
}.window.post dt {
	line - height: 26px;
}.window.post dt span {
	height: 108px;
	line - height: 108px;
}.window.post dt label {
	width: 100px;
	float: left;
}.window.post dt label.perlabel {
	float: none;
}.window.post textarea {
	width: 312px;
	height: 62px;
	line - height: 24px;
	border: 1px solid#c9c5c1;
	background - color: #f2f2f2;
	font - family: "微软雅黑",
	"宋体";
	font - size: 14px;
	color: #686868;
}.window.post dd input.three {
	width: 238px;
	margin - right: 10px;
}.window.
default {
		width:
		406px;
	}

	.window.
default span {
		width:
		52px;
	}.window.
default dd select {
		width:
		38px;
		margin:
		0 6px;
	}.window.
default dd textarea {
		width:
		350px;
	}.window.
default dd b {
		float:
		right;
		margin - right: 5px;
		font - weight: normal;
	}.window.
default dd b input {
		width:
		auto;
		height:
		auto;
		margin - right: 5px;
	}

页面中的css

<style type="text/css">
.window{
	left:25%;
	width:676px;
}
.window .top{
	width:626px;
}
.window span{
	font-family:"微软雅黑";
	font-weight: bold;
}
.window .post{
	width:645px;
}
.window .post label{
	font-size: 13px;
}
.window dl{
margin-left:25px !important;
}
.window .post hr{
	width:230px;
	text-align: left;
	margin-bottom: 20px;
}
.window .add dd div{
	width:125px;
	float:left;
	vertical-align: middle;
	height: 18px;
	line-height: 18px;
}
.custom_checkbox_self{
	width:18px;
	height:18px;
	text-indent:100px;
	overflow:hidden;
	float:left;
	background:url(../images/custom_checkbox.png);
	margin-right:10px;
	}
</style>

js函数：

function openJoinSetting(){
	var joinSetting = document.getElementById('joinSetting');
	joinSetting.style.display='block';
	joinSetting.style.visibility='visible';
	document.getElementById('back2').style.display='block';
	document.getElementById('wiSsetting').style.display='block';
}
$(document).ready(function(){
	$(".custom_checkbox_self").click(function(){
		if($(this).text().trim()=="0"){
			$(this).css("background","url(../images/custom_checkbox_checked.png)");
			$(this).text('1');
		}else{
			$(this).css("background","url(../images/custom_checkbox.png)");
			$(this).text('0');
		}
	});

});

窗体代码：

<div id="joinSetting" style="display: none; visibility: hidden; ">
	<div id="back2" class="bj"></div>
	<div id="wiSsetting" class="window">
		<div class="top">
			<a href="javascript:closealbum();" class="close"><img
					src="../images/icon03.gif" alt="关闭" /> </a>申请表必填项设置</div>
			<dl class="add post">
				<dd>
					<span>基本信息</span><br/>
					<hr/>
					<div><div id="MemberName" style="width:18px;" class="custom_checkbox_self">0</div><label for="MemberName">姓名</label></div>
					<div><div id="Phone" style="width:18px;" class="custom_checkbox_self">0</div><label for="Phone">手机</label></div>
					<div><div id="Company" style="width:18px;" class="custom_checkbox_self">0</div><label for="Company">企业</label></div>
					<div><div id="Post" style="width:18px;" class="custom_checkbox_self">0</div><label for="Post">企业职位</label></div>
					<div><div id="applyPosiGuid" style="width:18px;" class="custom_checkbox_self">0</div><label for="applyPosiGuid">申请职务</label></div>
				</dd>
				<dd>
					<span>具体信息</span><br/>
					<hr/>
					<div><div id="Hometown" style="width:18px;" class="custom_checkbox_self">0</div><label for="Hometown">籍贯</label></div>
					<div><div id="Gender" style="width:18px;" class="custom_checkbox_self">0</div><label for="Gender">性别</label></div>
					<div><div id="Birthday" style="width:18px;" class="custom_checkbox_self">0</div><label for="Birthday">生日</label></div>
					<div><div id="Nation" style="width:18px;" class="custom_checkbox_self">0</div><label for="Nation">民族</label></div>
					<div><div id="Party" style="width:18px;" class="custom_checkbox_self">0</div><label for="Party">政治面貌</label></div>
					<br />
					<div><div id="IdentityCard" style="width:18px;" class="custom_checkbox_self">0</div><label for="IdentityCard">身份证</label></div>
					<div><div id="EducationLevel" style="width:18px;" class="custom_checkbox_self">0</div><label for="EducationLevel">学历</label></div>
					<div><div id="Telephone" style="width:18px;" class="custom_checkbox_self">0</div><label for="Telephone">电话</label></div>
					<div><div id="Fax" style="width:18px;" class="custom_checkbox_self">0</div><label for="Fax">传真</label></div>
					<div><div id="Email" style="width:18px;" class="custom_checkbox_self">0</div><label for="Email">邮箱</label></div>
				</dd>
				<dd>
					<span>企业信息</span><br/>
					<hr/>
					<div><div id="CompanyAddress" style="width:18px;" class="custom_checkbox_self">0</div><label for="CompanyAddress">地址</label></div>
					<div><div id="CompanyStaffNumber" style="width:18px;" class="custom_checkbox_self">0</div><label for="CompanyStaffNumber">员工数</label></div>
					<div><div id="CompanyLegalPerson" style="width:18px;" class="custom_checkbox_self">0</div><label for="CompanyLegalPerson">法人代表</label></div>
					<div><div id="CompanyCreatedDate" style="width:18px;" class="custom_checkbox_self">0</div><label for="CompanyCreatedDate">成立时间</label></div>
					<div><div id="CompanyProperty" style="width:18px;" class="custom_checkbox_self">0</div><label for="CompanyProperty">企业性质</label></div>
					<br />
					<div><div id="CompanyIsPublic" style="width:18px;" class="custom_checkbox_self">0</div><label for="CompanyIsPublic">是否上市</label></div>
					<div><div id="CompanyIndustry" style="width:18px;" class="custom_checkbox_self">0</div><label for="CompanyIndustry">所属行业</label></div>
					<div><div id="CompanyWebsite" style="width:18px;" class="custom_checkbox_self">0</div><label for="CompanyWebsite">网址</label></div>
					<div><div id="CompanyAssets" style="width:18px;" class="custom_checkbox_self">0</div><label for="CompanyAssets">企业资产</label></div>
				</dd>
				<dd>
					<span>附件</span><br/>
					<hr/>
					<div><div id="CompanyPicUrl" style="width:18px;" class="custom_checkbox_self">0</div><label for="CompanyPicUrl">营业执照复印件</label></div>
					<div><div id="IdentityPicUrl" style="width:18px;" class="custom_checkbox_self">0</div><label for="IdentityPicUrl">身份证照片</label></div>
					<div style="width:150px;"><div id="PersionPicUrl" style="width:18px;" class="custom_checkbox_self">0</div><label for="PersionPicUrl">个人名片照片</label></div>
				</dd>
				<dt class="button">
					<input name="" type="submit" value="确认"  onclick=""/>
					<input name="" type="button" value="取消" onclick="" />
				</dt>
			</dl>
	</div>
</div>

这是一个弹出层的表单选择。

图片素材：