console
var arr = [];
$('#wrap li').on('click', function(){
var val = '';
var thisVal = $(this).html();
if (!$(this).hasClass("active")) {
$(this).addClass("active")
arr.push(thisVal);
}else{
$(this).removeClass("active")
arr.splice(arr.indexOf(thisVal), 1);
}
$('.val').html(arr.join(','))
});
var arr2 = [];
$('.btn').click(function(){
$("#wrap li").each(function(){
if ($(this).hasClass('active')) {
arr2.push($(this).html());
}
});
$('.val2').html(arr2.join(','))
});
<ul id="wrap">
<li>2010</li>
<li>2011</li>
<li>2012</li>
<li>2013</li>
<li>2014</li>
<li>2015</li>
</ul>
<span class="btn">点击</span>
<p class="val"></p>
<p class="val2"></p>
ul{
list-style:none
}
li{
display: inline-block;
width:50px;
height: 50px;
border:1px solid #ccc;
border-radius:5px;
line-height:50px;
text-align: center;
cursor: pointer;
}
li.active{
background: #00f0f0;
}
.btn{
display: inline-block;
padding: 10px 20px;
background: #f0f000;
margin-left: 50px;
cursor: pointer;
}