多選jquery

<style>
     .duo { height:50px;}
	 .duo a { width:60px; height:30px; color:#000; display:inline-block;}
	 .on { border:1px solid#000;}
</style>

<div class="duo">
    <a>不限</a>
    <a>多選</a>
    <a>多選</a>
    <a>多選</a>
    <a>多選</a>
    <a>多選</a>
    <a>多選</a>
    <a>多選</a>
  </div>
  <div class="duo">
    <a>不限</a>
    <a>多選</a>
    <a>多選</a>
    <a>多選</a>
    <a>多選</a>
    <a>多選</a>
    <a>多選</a>
    <a>多選</a>
  </div>

$(".duo").each(function(){
      var that=$(this);
      $(this).children("a").click(function(){
        if($(this).index() == 0){
          that.children('a').removeClass('on');
          $(this).addClass('on');
        }else{
          that.children('a').eq(0).removeClass('on');
          $(this).toggleClass('on');
        }
      })
    })

var t1=document.getElementById('t1');
	var as=t1.getElementsByTagName('a');
	for (var i = 0; i < as.length; i++) {
		as[i].onclick=function(){
			
			alert(this.innerText);
		}
	}