demo引入jquery版本号为jquery-1.7.1.min.js
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
html,body,p,ul,li,h1,h2,h3,h4,img,dl,dt,dd,ol{
padding: 0;
margin: 0;
border: none;
}
body{
font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;
font-size: 12px;
color: #333333;
}
/*checkBox*/
label {
display: inline-block;
vertical-align: middle;
}
h1{font-size: 18px;margin-bottom: 10px;}
.checkBox{margin: 20px 0 0 50px;}
.checkBox .all-top{margin-bottom: 5px;color: #58a200;font-weight: bold;}
.checkBox dl{
margin-bottom: 6px;
border-bottom: 1px dotted #ccc;
margin-left: 20px;
}
.checkBox dl dt{
font-weight: bold;
color:#D58C00;
}
.checkBox dl dd{
line-height: 14px; padding: 4px 0 4px 16px;
}
.checkBox dd span{
display: inline-block;
*display: inline;
width: 200px;
zoom:1;
font-weight: bold;
margin-bottom: 6px;
}
.checkBox dd label{font-weight: normal;cursor: pointer;}
.checkBox dd p label{margin-bottom:2px;}
.checkBox input[type="checkbox"]{
margin: -2px 4px 1px 0;
vertical-align:middle;
}
</style>
</head>
<body>
<div id="Role_menu_c" >
<form action="" method="post" >
<div class="checkBox">
<h1>内容一</h1>
<label class="all-top"><input type="checkbox">全选</label>
<dl>
<dt>
<label><input type="checkbox" />标题1</label>
</dt>
<dd>
<span>
<p>属性1</p>
<label><input type="checkbox" name="ckRead" />只读</label>
<label><input type="checkbox" name="ck" />维护</label>
</span>
<span>
<p>属性2</p>
<label><input type="checkbox" name="ckRead" />只读</label>
<label><input type="checkbox" name="ck" />维护</label>
</span>
<span>
<p>属性3</p>
<label><input type="checkbox" name="ckRead" />只读</label>
<label><input type="