前端单选框、单选按钮、下拉列表多条件过滤数据

1、效果图

2、页面渲染及控制代码

<div class="select">
			            <span>选课情况：</span>
			    		<select id = "xueke">
			    			<option value="0" selected="selected">全科</option>
			    			<option value="1">化学-生物-地理-政治</option>
			    			<option value="2">化学-生物-历史-地理</option>
			    			<option value="3">化学-生物-历史-政治</option>
			    			<option value="4">物理-地理-政治</option>
			    			<option value="5">物理-化学-生物-地理</option>
			    			<option value="6">物理-化学-生物-历史</option>
			    			<option value="7">物理-化学-生物-政治</option>
			    			<option value="8">物理-历史-地理</option>
			    			<option value="9">物理-历史-政治</option>
			    		</select>
			    	</div>
		
		<div id = "leibie" class = "qiehuan">
	        <label class = "wei"><input name="radio" type="radio" value="10"  checked="checked"/>未折分 </label> 
			<label><input name="radio" type="radio" value="11" />折分 </label> 
		</div>
		<div class = "guolv">
			<div id = "gouxuan">
				<input type="checkbox" name="test" value="a"/><span>去除单科缺考人员</span>
				<input type="checkbox" name="test" value="b"/><span>科目换算成100分</span>
				<input type="checkbox" name="test" value="c"/><span>体育成绩分析</span> 
			</div>	
		</div>
        <div class="page-content" style="margin-left: 0px;margin-top:-50px;" id = "buzhefen">
                <table class="table table-striped table-bordered table-hover rpt_grade_score_DetailGrid"  align='center'>
                </table>
        </div>
        
        
            <div class="page-content" style="margin-left: 0px;margin-top:-50px;" id = "zhefen">
                
                <table class="table table-striped table-bordered table-hover rpt_grade_score_DetailGrid1"  align='center'>
                </table>
            </div><div class