<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery</title>
<style type="text/css">
ul li{list-style:none;}
ul li.menu{position:relative;width:120px;}
ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;}
ul li.menu ul li{padding:5px 0;border-bottom:1px dotted #ddd;}</style>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".menu").hover(
function(){
$(".content").fadeIn(800);
// $(".content").slideDown(800);
},function(){
$(".content").fadeOut(1000)
// $(".content").slideUp(1000)
});
})
</script>
<script type="text/javascript"><!--
var num = 0;
var f_str="";
$(function() {
$("input[name='checkbox_name[]']").click(
function(){
num =$("input[name='checkbox_name[]']:checked").length;
f_str="";
$("input[name='checkbox_name[]']").each(
function(){
if($(this).attr("checked")==true){
f_str += $(this).attr("value")+",";
}
});
$("#input").html("当前所有老师"+num+"个老师:"+f_str);
}
);
$("#checkedAll").click(function() {
if ($(this).attr("checked") == true) {
$("input[name='checkbox_name[]']").each(function() {
$(this).attr("checked", true);
f_str += $(this).attr("value")+",";
num =$("input[name='checkbox_name[]']:checked").length;
});
$("#input").html("当前所有老师"+num+"个老师:"+f_str);
} else {
$("input[name='checkbox_name[]']").each(function() {
$(this).attr("checked", false);
});
f_str="";
num =$("input[name='checkbox_name[]']:checked").length;
$("#input").html("当前所有老师"+num+"个老师"+f_str);
}
});
$("#input").html("当前所有老师"+num+"个老师");
});
// --> </script>
</head>
<body>
<div>
<ul>
<li class="menu">
<input type="checkbox" value="hehe" name="checkedAll" id="checkedAll">高中老师
<ul class="content">
<li><input name="checkbox_name[]" id="checkbox_name" type="checkbox" value="老师1">老师1 </li>
<li><input name="checkbox_name[]" id="checkbox_name" type="checkbox" value="老师2">老师2 </li>
<li><input name="checkbox_name[]" id="checkbox_name" type="checkbox" value="老师3">老师3 </li>
<li><input name="checkbox_name[]" id="checkbox_name" type="checkbox" value="老师4">老师4 </li>
<li><input name="checkbox_name[]" id="checkbox_name" type="checkbox" value="老师5">老师5 </li>
</ul>
</li>
</ul>
</div>
<div id="input">
</div>
</body>
</html>
转自网络