sem项目紧呀，同事也不给力，还得我给他们做嫁妆。个人花了3小时写出来的js代码。光实现css就花了2小时。有必要学习css了。实现的功能很简单，就是多重条件 多重选择提交到后台实现查询。
淘宝后台的图片
实现的js
<html>
<head>
<style>
.span1{
cursor:hand;
}
.span2{
margin:0px;border:1px solid #FF7F00;
cursor:hand;
}
.span2 b {
background:url(1.png) 0px -54px no-repeat;
height: 13px;
width: 13px;
}
</style>
<script>
var $=function(objId){
return document.getElementById(objId);
}
/*
*参数1：为span 自己对象
*hiddenId：为对应的隐藏域id
*/
var query=function(obj,hiddenId){
var objId=obj.id;
//”不限“有些特殊性，不限 不能手动删除，只能由程序判断
if(objId=='all'){
$(hiddenId).value="";//隐藏域的值为空
//样式为选中样式，即样式没有改变，不用提交后台。
if(obj.className=='span2'){
}else{
//改变 同类别下其他项为 未选状态
var tr=obj.parentNode.parentNode;
changeSiblingUnchecked(tr);
//样式改变了,必须提交到后台
//---------- 提交你的form 即可 以下加入你的代码..................
// $('sform').submit();
}
}else{
// 改变自己的状态
var tr=obj.parentNode.parentNode;
//获取值
var str=changeSelfStatus(obj,tr);
$(hiddenId).value=str; //这里的值可能为空，也可能是数组，如果是数组，刚好是以,分隔的，后台处理即可。
//---------- 提交你的form 即可 以下加入你的代码..................
// $('sform').submit();
}
}
/*
*改变除 "不限" 以外 的状态为 不选状态。
*/
var changeSiblingUnchecked=function(tr){
var tds=tr.cells;
for(var i=1;i<tds.length;i++){
var span=tds[i].firstChild;
if(span.id=='all'){ //不限为选中状态
span.className="span2";
}else{ //其他 未选
span.className="span1";
}
}
}
/*
*改变自身状态,同时判断其他兄弟的状态。
*注意：
*(1)如果所有的被选中，则默认为不选
*(2)如果所有的都未被选中，还是默认为不选。
*/
var changeSelfStatus=function(self,tr){
var str=[];
var tds=tr.cells;
var flag=true;
var allSpan; //临时存放 不限 列，便于后期处理
if(self.className=='span1'){ //由未选中状态变为选中状态 ,如果其他项如果也是必选状态，则就转为 ”不限“
self.className='span2'; //自己变为选中状态
//查找兄弟节点的状态
for(var i=1;i<tds.length;i++){
var span=tds[i].firstChild;
if(span.id=='all'){ ////保持 不限为未选中状态
allSpan=span;
}else{
if(span.className!="span2"){ //未选中
flag=false;
}else{ //选中
str.push(span.id); //放入值
}
}
}
if(!flag){ //存在没有选中的兄弟节点，说明是选择不是全选
allSpan.className="span1";
}else{ //全部选中，”不限“转为选中，其他都不选，包括自己。
alert("所有的都被选中，即为 不限");
changeSiblingUnchecked(tr);
str="";
}
}else{ //由选中转变为 取消状态
self.className='span1'; //自己变为未选中状态
//查找兄弟节点的状态
for(var i=1;i<tds.length;i++){
var span=tds[i].firstChild;
if(span.id=='all'){ ////保持 不限为未选中状态
allSpan=span;
}else{
if(span.className=="span2"){ //存在选中的兄弟节点
str.push(span.id); //放入值
flag=false;
}
}
}
//如都没有选中，则转为 ”不限“
if(flag){
str="";
alert("所有的都未选中，即为 不限");
changeSiblingUnchecked(tr);
}else{ //存在选中，不限取消
allSpan.className="span1";
}
}
return str;
}
</script>
</head>
<body>
<form id="sform">
<input type="hidden" name="level" id="level"/>
<input type="hidden" name="pipeType" id="pipeType"/>
</form>
<span><pre>小黄同学查看源码请注意 "不限" span里面没有加< b>< b>,不限默认为选中状态.大题思路如下：
(1)如果所有的被选中，则默认为不选
(2)如果所有的都未被选中，还是默认为不选。
(3)其他情况，要么就是多选，要么就是单选。
(4)如果当前状态为 ”不选“ ，用户还点击"不选"，则不用提交。否则所有情况都要提交。
(5)隐藏域的值要么是"",要么是,分隔开得。田萌后台自己记得处理。利用这个改成jsp的应该没有问题了吧！
困死了，睡觉了................................................
</pre></span>
<table>
<tr id="tr1">
<th>调控级别:</th>
<td><span class="span2" id="all" onclick="query(this,'level')">不限</span></td>
<td><span class="span1" id="一级" onclick="query(this,'level')">一级<b></b></span></td>
<td><span class="span1" id="二级" onclick="query(this,'level')">二级<b></b></span></td>
</tr>
<tr>
<th>管线种类:</th>
<td><span class="span2" id="all" onclick="query(this,'pipeType')">不限</span></td>
<td><span class="span1" id="t1" onclick="query(this,'pipeType')">干线<b></b></span></td>
<td><span class="span1" id="t2" onclick="query(this,'pipeType')">支线<b></b></span></td>
<td><span class="span1" id="t3" onclick="query(this,'pipeType')">连接线<b></b></span></td>
</tr>
</table>
</body>
</html>
