一、目标
想实现如下 去哪儿网 的一个多条件搜索功能,就是勾选了上面的条件,下面的内容就根据上面勾选条件自动选择展示......
二、前端
1、html 文件
1 <div class="choose" style="margin-left: 1%;color: #0a0a0a"> 2 <p class="currentStatus"> 3 <span style="color: #93969B">当前状态</span> 4 <span class="font-12"> 5 <input type="checkbox" name="currentStatus" class="e-selfecheckbox" value="" id="currentStatus1" checked> 6 <label for="currentStatus1"> 不限</label> 7 <input type="checkbox" name="currentStatus" class="e-selfecheckbox" value="2" id="currentStatus2"> 8 <label class="selfecheckbox_label" for="currentStatus2"> 空闲</label> 9 <input type="checkbox" name="currentStatus" class="e-selfecheckbox" value="3" id="currentStatus3"> 10 <label class="selfecheckbox_label" for="currentStatus3"> 服务中</label> 11 </span> 12 </p> 13 <p class="driverPlaceAlready"> 14 <span style="color: #93969B">司机占用</span> 15 <span class="font-12"> 16 <input type="checkbox" name="driverPlace2" class="e-selfecheckbox" value="" id="driverPlace4" checked> 17 <label for="driverPlace4"> 不限</label> 18 <input type="checkbox" name="driverPlace2" class="e-selfecheckbox" value="2" id="driverPlace5"> 19 <label class="selfecheckbox_label" for="driverPlace5"> 未占用</label> 20 <input type="checkbox"name="driverPlace2" class="e-selfecheckbox" value="3" id="driverPlace6"> 21 <label class="selfecheckbox_label" for="driverPlace6"> 已占用</label> 22 </span> 23 </p> 24 <p class="startData"> 25 <span style="color: #93969B">出发日期</span> 26 <span class="font-12"> 27 <input type="checkbox" name="startData" class="e-selfecheckbox" value="" id="startData1" checked> 28 <label for="startData1"> 不限</label> 29 <input type="checkbox" name="startData" class="e-selfecheckbox" value="0" id="startData2"> 30 <label class="selfecheckbox_label" for="startData2"> 今天</label> 31 <input type="checkbox" name="startData" class="e-selfecheckbox" value="1" id="startData3"> 32 <label class="selfecheckbox_label" for="startData3"> 明天</label> 33 <input type="checkbox" name="startData" class="e-selfecheckbox" value="2" id="startData4"> 34 <label class="selfecheckbox_label" for="startData4"> 后天</label> 35 <input type="checkbox" name="startData" class="e-selfecheckbox" value="3" id="startData5"> 36 <label class="selfecheckbox_label" for="startData5"> ${threeDaysFromNow}</label> 37 <input type="checkbox" name="startData" class="e-selfecheckbox" value="4" id="startData6"> 38 <label class="selfecheckbox_label" for="startData6"> ${fourDaysFromNow}</label> 39 </span> 40 </p> 41 </div>