jQuery checkbox简单实用技巧(二)
这次带来是checkbox中局部复选框的使用代码如下:
<!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;}
*,html{
margin:0px;
padding:0px;
}
body
{
text-align:center;
font-size:12px;
font-family:宋体,Times New Roman;
}
#container{
position:relative;
margin:0px auto 0px auto;
width:1002px;
text-align:left;
}
/*头部*/
/*头部导航*/
#headLink
{
position:absolute;
left:305px;
top:42px;
}
#headLink .menu
{
width:80px;
text-align:center;
float:left;
}
.menu_head {
padding: 1px;
cursor: pointer;
font-weight:bold;
}
.menu_body {
display:none;
}
.menu_body a
{
padding:5px 0px;
display:block;
color:#535353;
text-align:center;
background-color:#eee;
text-decoration:none;
}
.menu_body a:hover {
color:#7fb2f4;
background-color:#dfdfdf;
}
</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_head").click(function() {
$(this).parent().find(".menu_body").slideDown('fast').show();
$(this).parent().hover(function() {
}, function(){
$(this).parent().find(".menu_body").slideUp('slow');
});
}).hover(function() {
$(this).css({color:"#F4AE34"});
}, function(){
$(this).css({color:"#000"});
});
})
</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);
}
);
$("input[name='checkedAll']").click(function() {
if ($(this).attr("checked") == true) {
$("input[id='"+$(this).attr("id")+"'][name='checkbox_name[]']").each(function() {
if($(this).attr("checked")!=true ){
$(this).attr("checked", true);
f_str += $(this).attr("value")+",";
}
});
} else {
f_str="";
$("input[id='"+$(this).attr("id")+"'][name='checkbox_name[]']").each(function() {
$(this).attr("checked", false);
});
$("input[name='checkbox_name[]']").each(
function(){
if($(this).attr("checked")==true){
f_str += $(this).attr("value")+",";
}
});
}
num =$("input[name='checkbox_name[]']:checked").length;
$("#input").html("当前所有老师"+num+"个老师已经被选中"+f_str);
});
});
// -->
</script>
</head>
<body>
<div id="container">
<div id="head">
<div id="headLink">
<div class="menu">
<p class="menu_head">首页</p>
</div>
<div class="menu">
<input type="checkbox" value="地理老师" name="checkedAll" id="dili" parentId="0"><span class="menu_head">地理老师...</span>
<div class="menu_body">
<ul class="content">
<li><input name="checkbox_name[]" id="dili" type="checkbox" value="地理老师1">地理老师1 </li>
<li><input name="checkbox_name[]" id="dili" type="checkbox" value="地理老师2">地理老师2 </li>
<li><input name="checkbox_name[]" id="dili" type="checkbox" value="地理老师3">地理老师3 </li>
<li><input name="checkbox_name[]" id="dili" type="checkbox" value="地理老师4">地理老师4 </li>
<li><input name="checkbox_name[]" id="dili" type="checkbox" value="地理老师5">地理老师5 </li>
</ul>
</div>
</div>
<div class="menu">
<input type="checkbox" value="中学老师" name="checkedAll" id="zhongxue" parentId="0"><span class="menu_head">中学老师...</span>
<div class="menu_body">
<ul class="content">
<li><input name="checkbox_name[]" id="zhongxue" type="checkbox" value="中学老师1">中学老师1 </li>
<li><input name="checkbox_name[]" id="zhongxue" type="checkbox" value="中学老师2">中学老师2 </li>
<li><input name="checkbox_name[]" id="zhongxue" type="checkbox" value="中学老师3">中学老师3 </li>
<li><input name="checkbox_name[]" id="zhongxue" type="checkbox" value="中学老师4">中学老师4 </li>
<li><input name="checkbox_name[]" id="zhongxue" type="checkbox" value="中学老师5">中学老师5 </li>
</ul>
</div>
</div>
<div class="menu">
<input type="checkbox" value="物理老师" name="checkedAll" id="wuli" parentId="0"><span class="menu_head">物理老师...</span>
<div class="menu_body">
<ul class="content">
<li><input name="checkbox_name[]" id="wuli" type="checkbox" value="物理老师1">物理老师1 </li>
<li><input name="checkbox_name[]" id="wuli" type="checkbox" value="物理老师2">物理老师2 </li>
<li><input name="checkbox_name[]" id="wuli" type="checkbox" value="物理老师3">物理老师3 </li>
<li><input name="checkbox_name[]" id="wuli" type="checkbox" value="物理老师3">物理老师4 </li>
<li><input name="checkbox_name[]" id="wuli" type="checkbox" value="物理老师5">物理老师5 </li>
</ul>
</div>
</div>
<div class="menu">
<input type="checkbox" value="化学老师" name="checkedAll" id="huaxue" parentId="0"><span class="menu_head">化学老师...</span>
<div class="menu_body">
<ul class="content">
<li><input name="checkbox_name[]" id="huaxue" type="checkbox" value="化学老师1">化学老师1 </li>
<li><input name="checkbox_name[]" id="huaxue" type="checkbox" value="化学老师2">化学老师2 </li>
<li><input name="checkbox_name[]" id="huaxue" type="checkbox" value="化学老师3">化学老师3 </li>
<li><input name="checkbox_name[]" id="huaxue" type="checkbox" value="化学老师4">化学老师4 </li>
<li><input name="checkbox_name[]" id="huaxue" type="checkbox" value="化学老师5">化学老师5 </li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="input">
当前所有老师0个老师已经被选中
</div>
</body>
</html>
已经实现了局部全选,反选,单选,还有对应的数据显示.由于写的比较急忙所以还有写地方没有进行优化,还请见谅
