<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> 项
<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>