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
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'); } }); });
窗口代码：
申请表必填项设置
基本信息
0
姓名
0
手机
0
企业
0
企业职位
0
申请职务
详细信息
0
籍贯
0
性别
0
生日
0
民族
0
政治面貌
0
身份证
0
学历
0
电话
0
传真
0
邮箱
企业信息
0
地址
0
员工数
0
法人代表
0
成立时间
0
企业性质
0
是否上市
0
所属行业
0
网址
0
企业资产
附件
0
营业执照复印件
0
身份证照片
0
个人名片照片

这是一个弹出层的表单选择。
图片素材：