HTML代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多组全选</title>
<link rel="stylesheet" type="text/css" href="css1.css"/>
<script src="jquery.js"></script>
<script>
$(function(){
$(".input").click(function(){
if(this.checked){
$(this).parents('div.row1').find("input[name='checkbox']").prop("checked","true");
}else{
$(this).parents('div.row1').find("input[name='checkbox']").prop("checked",false);
}
});
$("input[name='checkbox']").click(function(){
var selectedlength=$(this).parents('div.form-inline').find("input[name='checkbox']:checked").length;
var alllength=$(this).parents('div.form-inline').children().length;
if( selectedlength==alllength){
$(this).closest('div.row1').find(".input").prop("checked",true);
}else{
$(this).closest('div.row1').find(".input").prop("checked",false);
}
});
});
</script>
</head>
<body>
<div class="panel-body">
<div class="row1">
<div class="row1-title">
<label>
<input class="input" type="checkbox"><span>消息公告</span>
</label>
</div>
<div class="row1-content">
<div class="form-inline clearfix">
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>查询本校</span>
</label>
</div>
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>查询全部</span>
</label>
</div>
</div>
</div>
</div>
<div class="row1">
<div class="row1-title">
<label>
<input class="input" type="checkbox"><span>报名资料</span>
</label>
</div>
<div class="row1-content">
<div class="form-inline clearfix">
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>增加</span>
</label>
</div>
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>修改</span>
</label>
</div>
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>删除</span>
</label>
</div>
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>导入</span>
</label>
</div>
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>导出</span>
</label>
</div>
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>查询本校</span>
</label>
</div>
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>查询全部</span>
</label>
</div>
</div>
</div>
</div>
<div class="row1">
<div class="row1-title">
<label>
<input class="input" type="checkbox"><span>培训作业</span>
</label>
</div>
<div class="row1-content">
<div class="form-inline clearfix">
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>删除</span>
</label>
</div>
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>导入</span>
</label>
</div>
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>导出</span>
</label>
</div>
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>查询本校</span>
</label>
</div>
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>查询全部</span>
</label>
</div>
</div>
</div>
</div>
<div class="row1">
<div class="row1-title">
<label>
<input class="input" type="checkbox"><span>通知管理</span>
</label>
</div>
<div class="row1-content">
<div class="form-inline clearfix">
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>通知编辑</span>
</label>
</div>
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>审核</span>
</label>
</div>
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>发布</span>
</label>
</div>
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>取消通知</span>
</label>
</div>
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>历史发布</span>
</label>
</div>
</div>
</div>
</div>
<div class="row1">
<div class="row1-title">
<label>
<input class="input" type="checkbox"><span>系统管理</span>
</label>
</div>
<div class="row1-content">
<div class="form-inline clearfix">
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>用户管理</span>
</label>
</div>
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>角色设置</span>
</label>
</div>
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>单位设置</span>
</label>
</div>
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>个人资料</span>
</label>
</div>
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>修改密码</span>
</label>
</div>
<div class="fl">
<label>
<input type="checkbox" name="checkbox"><span>系统初始化</span>
</label>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
css代码：
@charset "utf-8";
/* CSS Document */
.panel-body {
width:700px;
margin:0 auto;
}
.row1 {
width:100%;
}
.row1-title {
font-size:13px;
line-height:29px;
height:29px;
border-bottom:1px solid #b4c4d1;
background-color:#e8f1f7;
}
.row1-title span {
margin-left:5px;
}
.row1-title label {
margin-left:5px;
margin-top:-5px;
}
.row1-content {
height:29px;
padding-left:7px;
border-bottom:1px solid #b4c4d1;
background-color:#fff;
}
.row1-content label {
margin-left:18px;
}
.row1-content input {
line-height:29px;
vertical-align:middle;
}
.row1-content span {
line-height:29px;
margin-left:2px;
vertical-align:middle;
}
.row1-content .form-inline {
padding-top:0;
}
.one {
background:#9FC;
}
.two {
background:#FC6;
}
.fl {
float:left;
}
318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
