jquery实现多选框

<style>
	#div_con{
		border:1px solid #aaa;
		
		max-width:300px;
		background:#def;
	}
	
	#div_tip_in{
		padding:4px;
		max-height:300px;
		overflow:auto;
		background:#fff;
	}
	
	#div_tip_in div{
		padding:2px 6px;
		margin:2px;
		cursor:pointer;

		-moz-user-select:none; /*火狐*/
		-webkit-user-select:none; /*webkit浏览器*/
		-ms-user-select:none; /*IE10*/
		-khtml-user-select:none; /*早期浏览器*/
		user-select:none;	 
	}
	
	.tip_selected_row{
		background:#cef;		 
	}
	
</style>

　<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

 

<div id='div_con'>
<div style='padding:10px 1px;' > 
<div style='padding:1px 10px; ' >
<button onclick="tipSelectAll(1)">全选</button>
<button onclick="tipSelectAll(0)">全不选</button>

选中 <span id='span_tip_selected_num'> 3 </span> 项
&nbsp;&nbsp;&nbsp;&nbsp;

<div style='padding:1px 10px; float:right;' >
<button>确定</button>
</div>

</div>
</div>
<div id='div_tip_in'  >
<div onclick="tipRowClick(this)">1.选项</div>
<div onclick="tipRowClick(this)">2.选项</div>
<div onclick="tipRowClick(this)">3.选项</div>
<div onclick="tipRowClick(this)">4.选项</div>
<div onclick="tipRowClick(this)">5.选项</div>
<div onclick="tipRowClick(this)">6.选项</div> 
<div onclick="tipRowClick(this)">7.选项</div>
<div onclick="tipRowClick(this)">8.选项</div>
<div onclick="tipRowClick(this)">9.选项</div>
<div onclick="tipRowClick(this)">10.选项</div>
<div onclick="tipRowClick(this)">11.选项</div>
<div onclick="tipRowClick(this)">12.选项</div>
<div onclick="tipRowClick(this)">13.选项</div> 
<div onclick="tipRowClick(this)">14.选项</div>
<div onclick="tipRowClick(this)">15.选项</div>
<div onclick="tipRowClick(this)">16.选项</div>
<div onclick="tipRowClick(this)">17.选项</div>
<div onclick="tipRowClick(this)">18.选项</div>
<div onclick="tipRowClick(this)">19.选项</div>
<div onclick="tipRowClick(this)">20.选项</div> 
<div onclick="tipRowClick(this)">21.选项</div>
<div onclick="tipRowClick(this)">22.选项</div>
<div onclick="tipRowClick(this)">23.选项</div>
<div onclick="tipRowClick(this)">24.选项</div>
<div onclick="tipRowClick(this)">25.选项</div>
<div onclick="tipRowClick(this)">26.选项</div>
<div onclick="tipRowClick(this)">27.选项</div> 
<div onclick="tipRowClick(this)">28.选项</div>
 
</div>

</div>


<script>
function tipSelectAll(vSel){
	if(vSel){	
		$('#div_tip_in div').addClass('tip_selected_row');	
	}else{
		$('#div_tip_in div').removeClass('tip_selected_row');	
	}
}

 function tipRowClick(vObj){
	$(vObj).toggleClass('tip_selected_row');	
	let t_sel = $('.tip_selected_row'); 
	let t_num = t_sel.length;	
	$('#span_tip_selected_num').html(t_num);
 }
 
</script>