<!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>无标题文档</title>
<link href="Untitled-2.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" language="javascript" src="../自己成就/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var av="";//表单里面的值
//给input表单赋值
function checkbox(obj){
var a=$("#"+obj).val();//得到复选表单的值
//如果第二次选择复选表框就在字符后面拼接逗号
//如果当前复选框为true那么就拼接当前值
if($("#"+obj).is(":checked")){
av=av+"|"+a;
}
//如果当前复选框为false那么就删除当前值
if(!$("#"+obj).is(":checked")){
var b=av.substring(0,av.indexOf(a)-1)+av.substring((av.indexOf(a)+a.length),av.length);
av=b;
}
}
//显示赋值内容
function onblu(){
$("#avalue").val(av);
}
</script>
</head>
<body>
<div id="container"><!--页面层容器-->
<div id="Header"><!--页面头部-->
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li class="menuDiv"></li>
<li><a href="#">博客</a></li>
<li class="menuDiv"></li>
<li><a href="#">设计</a></li>
<li class="menuDiv"></li>
<li><a href="#">相册</a></li>
<li class="menuDiv"></li>
<li><a href="#">论坛</a></li>
<li class="menuDiv"></li>
<li><a href="#">关于</a></li>
</ul>
</div>
</div>
<div id="PageBody"><!--页面主体-->
<div id="Sidebar"><!--侧边栏-->
</div>
<div id="MainBody"><!--主体内容-->
<div id="boke">
博客分类:<input type="text" id="avalue" οnfοcus="onblu()"/><br />
<input type="checkbox" name="che" id="che1" value="生活" οnclick="checkbox(this.id)"/>生活
<input type="checkbox" name="che" id="che2" value="旅游" οnclick="checkbox(this.id)"/>旅游
<input type="checkbox" name="che" id="che3" value="学习" οnclick="checkbox(this.id)"/>学习
</div>
</div>
</div>
</div>
</body>
</html>