1.链接数据库
<?php include("DBDA.class.php"); $db=new DBDA(); $sql="select * from fangzi"; $attr=$db->Query($sql); ?>
2.建立复选框表单
<form action="" method="post"> <div>区域:<input type="checkbox" onclick="quanxuan1(this)">全选</div> <div> <?php foreach($attr as $v) { echo "<input type='checkbox' name='area[]' class='area' value='{$v[2]}'>{$v[2]}";//设置name=area[]是数组,因为有很多个复选框,所以要把它的名字设置为数组,设置class名,为了下面js改变它的属性,给它设置value,为了下面能都取到它的值,进行查询 } ?> </div><br> <div>租赁类型:<input type="checkbox" onclick="quanxuan2(this)">全选</div> <div> <?php foreach($attr as $v) { echo "<input type='checkbox' name='zu[]' class='zu' value='{$v[5]}'>{$v[5]}"; } ?> </div><br> <div>房屋类型:<input type="checkbox" onclick="quanxuan3(this)">全选</div> <div> <?php foreach($attr as $v) { echo "<input type='checkbox' name='fangwu[]' class='fangwu' value='{$v[6]}'>{$v[6]}"; } ?> </div><br> <div>关键字:<input type="text" name="guanjianzi"></div> <div><input type="submit" value="搜索"></div> </form>
3.列表的显示
<table width="80%" border="1" cellpadding="0" cellspacing="0"> <tr> <td>关键字</td> <td>区域</td> <td>面积</td> <td>租金</td> <td>租赁类型</td> <td>房屋类型</td> </tr> <?php $tiaojian1=" 1=1 "; $tiaojian2=" 1=1 "; $tiaojian3=" 1=1 "; $tiaojian4=" 1=1 "; if(!empty($_POST["area"])){ $attr1=$_POST["area"]; //通过area取到的是数组 $str1=implode("','",$attr1); //把数组拼接成字符串 因为sql语句中例如 select * from login code in('','','','');,所以用‘,’作为拼接符号把数组拼接成字符串 $tiaojian1=" area in ('$str1')";//直接把上面的字符串写到条件里 } if(!empty($_POST["zu"])){ $attr2=$_POST["zu"]; $str2=implode("','",$attr2); $tiaojian2=" zulinleixing in ('$str2')"; } if(!empty($_POST["fangwu"])){ $attr3=$_POST["fangwu"]; $str3=implode("','",$attr3); $tiaojian3=" fangwuleixing in ('$str3')"; } if(!empty($_POST["guanjianzi"])){ $str4=$_POST["guanjianzi"]; $tiaojian4=" keyword like '%{$str4}%'"; } $sql1="select * from fangzi where {$tiaojian1} and {$tiaojian2} and {$tiaojian3} and {$tiaojian4}";//把各个条件拼起来 $zattr=$db->Query($sql1); foreach($zattr as $zv) { echo "<tr><td>{$zv[1]}</td><td>{$zv[2]}</td><td>{$zv[3]}</td><td>{$zv[4]}</td><td>{$zv[5]}</td><td>{$zv[6]}</td></tr>"; } ?> </table>
4.通过js控制全选的选中状态
<script> function quanxuan1(aa) { var attr=document.getElementsByClassName("area"); for(var i=0;i<attr.length;i++) { if(aa.checked) //判断全选复选框的选中状态 { attr[i].setAttribute("checked","checked"); 给各个小复选框添加cheched=checked的属性 } else { attr[i].removeAttribute("checked"); //给各个小复选框移除checked属性 } } } function quanxuan2(aa) { var attr=document.getElementsByClassName("zu"); for(var i=0;i<attr.length;i++) { if(aa.checked) { attr[i].setAttribute("checked","checked"); } else { attr[i].removeAttribute("checked"); } } } function quanxuan3(aa) { var attr=document.getElementsByClassName("fangwu"); for(var i=0;i<attr.length;i++) { if(aa.checked) { attr[i].setAttribute("checked","checked"); } else { attr[i].removeAttribute("checked"); } } } </script>