<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS测试</title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<style type="text/css">
.leftdiv {
200px;
height: 350px;
float: left;
border: 1px solid #ff0000;
}
.ulnav {
list-style: none;
}
.ulnav li{
80px;
float:left;
}
.unonli {
margin: 8px;
padding:3px;
border: 1px solid #0094ff;
cursor: pointer;
text-align:center;
}
.onli {
margin: 8px;
padding:3px;
background-color: #0094ff;
border: 1px solid #0094ff;
color: #ffffff;
text-align:center;
}
.rightdiv {
margin-left:10px;
600px;
height: 350px;
float: left;
border: 1px solid #000000;
}
.ulnav {
list-style: none;
}
.rightdiv li {
100px;
margin: 8px;
padding:3px;
border: 1px solid #d9d5d5;
text-align:center;
float:left;
}
.ulstudent {
list-style:none;
}
#stu_class2 {
display:none;
}
</style>
<script type="text/javascript">
$(function () {
$("#chkall").prop("class", "#stu_class1") //初始化
$(".ulnav").find("li").click(function () {
var objId = "#stu_" + $(this).prop("id");
$(".ulnav").find("li").removeClass("onli").addClass("unonli");
$(this).removeClass("unonli").addClass("onli");
$(".ulstudent").css("display", "none");
$("#chkall").prop("class", objId) //传递参数
$(objId).show();
SetChkStatus();
});
$("#chkall").click(function () {
var objectli = $("#chkall").prop("class");
$(this).prop('checked', this.checked)
$(objectli).find(":checkbox").prop('checked', this.checked)
GetSelectValues();
});
$(".ulstudent").find(":checkbox").click(function () {
var objectli = $("#chkall").prop("class");
var expr1 = $(objectli).find(":checkbox:checked");
var expr2 = $(objectli).find(":checkbox");
var selectAll = $(expr1).length == $(expr2).length;
$('#chkall').prop('checked', selectAll);
GetSelectValues();
});
function GetSelectValues()
{
var list = new Array();
$(".ulstudent").find(":checkbox:checked").each(function () {
list.push($(this).attr("value"))
});
var values = list.join(",");
$("#selectHideValue").val(values);
alert($("#selectHideValue").val());
}
function SetChkStatus()
{
var objectli = $("#chkall").prop("class");
var expr1 = $(objectli).find(":checkbox:checked");
var expr2 = $(objectli).find(":checkbox");
var selectAll = $(expr1).length == $(expr2).length;
$('#chkall').prop('checked', selectAll);
}
});
</script>
</head>
<body>
<div class="leftdiv">
<ul class="ulnav">
<li id="class1" class="onli">班级1</li>
<li id="class2" class="unonli">班级2</li>
</ul>
</div>
<div class="rightdiv">
<div style="margin:8px 50px;"><input type="checkbox" id="chkall" />全选<input type="hidden" id="selectHideValue" /></div>
<ul id="stu_class1" class="ulstudent">
<li><input type="checkbox" value="1001" />1年级张三1</li>
<li><input type="checkbox" value="1002" />1年级张三2</li>
<li><input type="checkbox" value="1003" />1年级张三3</li>
<li><input type="checkbox" value="1004" />1年级张三4</li>
<li><input type="checkbox" value="1005" />1年级张三5</li>
<li><input type="checkbox" value="1006" />1年级张三6</li>
<li><input type="checkbox" value="1007" />1年级张三7</li>
<li><input type="checkbox" value="1008" />1年级张三8</li>
</ul>
<ul id="stu_class2" class="ulstudent">
<li><input type="checkbox" value="2001" />2年级张三1</li>
<li><input type="checkbox" value="2002" />2年级张三2</li>
<li><input type="checkbox" value="2003" />2年级张三3</li>
<li><input type="checkbox" value="2004" />2年级张三4</li>
<li><input type="checkbox" value="2005" />2年级张三5</li>
<li><input type="checkbox" value="2006" />2年级张三6</li>
<li><input type="checkbox" value="2007" />2年级张三7</li>
<li><input type="checkbox" value="2008" />2年级张三8</li>
</ul>
</div>
</body>
</html>
