jquery的checkbox 多选全选反选取值

效果：

html部分

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

jquer部分

<script>
  $(function(){
    $('.checkAll').on('click',function(){
     var vm = $(this);
     /**全选**/
     if($('ul input').prop('checked')){
      $('ul input').prop('checked',true);
     }else{
      $('ul input').prop('checked',false);
     }
    })
    /**
    1。点击菜名, 全选取消。 
    2。如果菜名全部选中，全选开始 。 (菜名的checked 和菜名的所有数是否相等，不相等全选取消)
    项不是全选的时候全选按钮取消选择 ,
    ***/
    $('ul').on('click',"input[name='veget']",function(){
     var ischecked = $("ul input[name='veget']:checked").length;
     var inputAll = $("ul input[name='veget']").length;
     if(ischecked==inputAll){
      $('.checkAll input').prop('checked',true);
     }else{
      $('.checkAll input').prop('checked',false);
     }
    })

    //提交选中数据 (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>

下一篇把样式也加上。