今天遇到一个问题
我做了个数据显示,然后需要用checkbox来筛选出要求的内容例如:某个checked为true时显示符合这个条件的数据,隐藏不符合条件的
当为false时把其他的也显示出来我遇到的问题是,当有多个checkbox时,比如说第一个为true,这时显示了符合这个条件的数据
当继续勾选第二个时,又接着把符合第二个条件的显示出来(而不是全部),以此类推,隐藏也是,当大于两个checkbox被选中时,去掉其中一个勾选,这时只隐藏符合取消勾选条件的数据
保留剩下被选中的数据在线等
我做了个数据显示,然后需要用checkbox来筛选出要求的内容例如:某个checked为true时显示符合这个条件的数据,隐藏不符合条件的
当为false时把其他的也显示出来我遇到的问题是,当有多个checkbox时,比如说第一个为true,这时显示了符合这个条件的数据
当继续勾选第二个时,又接着把符合第二个条件的显示出来(而不是全部),以此类推,隐藏也是,当大于两个checkbox被选中时,去掉其中一个勾选,这时只隐藏符合取消勾选条件的数据
保留剩下被选中的数据在线等
http://flight.qunar.com/site/oneway_list.htm?searchDepartureTime=2009-10-29&arrivalTime=2009-11-02&searchDepartureAirport=%E5%8C%97%E4%BA%AC&searchArrivalAirport=%E4%B8%8A%E6%B5%B7&searchType=OneWayFlight&startSearch=true&from=qunarindex类似这个的功能
思路如下:
用你的时间,上午,举例子。
点击上午,我会从后台返回一个json串,里面包含了上午的所有数据。这时在要显示的地方采用innerHTML来拼接一下,就OK了。点击下午,用innerHTML = '' 来清空数据,在把下午的数据显示出来,就能达到你的显示和隐藏的效果。数组也可以。你没有具体代码,没法分析。提供思路,希望对你有帮助。
1.AJAX
2.JS实现对所有数据筛选.AJAX应该就像4L说的用json传递数据比较方便
JS筛选数据建议用JQuery框架去实现应该方便点
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<SCRIPT LANGUAGE="JavaScript">
<!--
var data=[{name:"AA",age:20,sex:false},
{name:"AB",age:70,sex:true},
{name:"CC",age:53,sex:true},
{name:"AD",age:42,sex:true},
{name:"EE",age:23,sex:false},
{name:"AF",age:26,sex:true},
{name:"AG",age:18,sex:false},
{name:"HH",age:24,sex:true},
{name:"AI",age:29,sex:false},
{name:"JJ",age:32,sex:false}
]
var $=function(id){return typeof(id)=="string"?document.getElementById(id):null;} function Check(){
var v=GetData();
var value="";
for(var i=0;i<v.length;i++){
value+=v[i].name+" "+v[i].age+" "+(v[i].sex?"男":"女")+"<br/>";
}
$("data").innerHTML=value;
}
function GetData(){
var html=new Array();
var if1=$("name").checked;
var if2=$("age").checked;
var if3=$("sex").checked;
var temResult;
for(var i=0;i<data.length;i++){
temResult=null;
if((if1 && data[i].name.indexOf("A")!=-1)|| !if1){temResult=data[i];}else{continue;}
if((if2 && temResult.age<30)|| !if2){temResult=data[i];}else{continue;}
if((if3 && !data[i].sex) || !if3){temResult=data[i];}else{continue;}
if(temResult!=null) html=AddArr(html,temResult)
}
return html;
}
function AddArr(arr,value){
for(var i=0;i<arr.length;i++){
if(arr[i].name==value.name){
return arr;
}
}
arr.push(value);
return arr;
}
window.onload=Check;
//-->
</SCRIPT>
</HEAD> <BODY>
<input type="checkbox" id="name" onclick="Check()"/> 姓名中包含A <br/>
<input type="checkbox" id="age" onclick="Check()"/> 年龄小于30 <br/>
<input type="checkbox" id="sex" onclick="Check()"/> 女性 <br/>
<div id="data"></div>
</BODY>
</HTML>