SOURCE

console 命令行工具 X clear

                    
>
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;
}