checkbox 修改样式+多选并取值

样式：

<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
 <script>
  $(function(){
    $('.checkAll').on('click',function(){
     var vm = $(this);
     /**全选**/
     if($('ul input').prop('checked')){
      $('ul input').prop('checked',true);
      $('ul').find('.mulit').addClass('mulitCur');
     }else{
      $('ul input').prop('checked',false);
      $('ul').find('.mulit').removeClass('mulitCur');
     }
    })
    /**
    1。点击菜名, 全选取消。 
    2。如果菜名全部选中，全选开始 。 (菜名的checked 和菜名的所有数是否相等，不相等全选取消)
    项不是全选的时候全选按钮取消选择 ,
    ***/
    $('ul').on('click',"input[name='veget']",function(){
     var vm = $(this);
     if(vm.prop('checked')){
      vm.parent().addClass('mulitCur');
     }else{
      vm.parent().removeClass('mulitCur');
     }
    

     var ischecked = $("ul input[name='veget']:checked").length;
     var inputAll = $("ul input[name='veget']").length;
     if(ischecked==inputAll){
      $('.checkAll input').prop('checked',true);
      $('ul').find('.mulit').addClass('mulitCur');
     // vm.parent()
      
     }else{
      $('.checkAll input').prop('checked',false);
      $('.checkAll .mulit').removeClass('mulitCur');
     }
    })

    //提交选中数据 (each循环出所有的ehecked ,多选放在数组里 ，转字符串用逗号隔开)
    $('.submit').on('click',function(){
     var temp =[];
     $('ul input[name=veget]:checked').each(function(val){
       temp[val]= $(this).val();
       })
     console.log(temp.join(',')); //需要的值
    });
     

  })
  </script>

<style>
  ul li{ list-style-type: none; float: left; margin: 5px;}
  ul input{
   outline: none; 
   font-size: 0;
   -webkit-appearance: none;
  }
  .mulit{
   cursor: pointer;
   background: #eee;
   color: #333;
   padding: 3px 5px;
  }
  .mulitCur{
   background: blue;
   color: #fff;
  }
  .submit{
   -webkit-appearance: none;
   line-height: 25px; 
   outline: none;
   width: 100px;
   margin-left: 20px;
  }
  
  /***
   1.这里是提交按钮样式
   2.样式丑 主要是记录。
  **/
  @-webkit-keyframes btn{
   0% { background: antiquewhite}
   100% {background: aquamarine;}
  }
  .submit:hover{
   -webkit-animation:btn 2s linear  ;
  }
 </style>

<ul>
 <li class="checkAll"><label class="mulit"><input type="checkbox">全选</label></li>
 <li><label class="mulit"><input type="checkbox" name="veget" value="白菜">白菜</label></li>
 <li><label class="mulit"><input type="checkbox" name="veget" value="芹菜">芹菜</label></li>
 <li><label class="mulit"><input type="checkbox" name="veget" value="酸菜">酸菜</label></li>
</ul>
<div>
 <button class="submit">提交</button>
</div>

记录一下