jQuery实现多选框全选/全部选

用js jquery 的方法实现全选/全不选；
1.html代码：

 <label for="all" id="labelall">全选</label>
    <input type="checkbox"  id="all">

   <ul id="ul">
       <li>
        <label for="all">手机</label>
        <input type="checkbox"  > 
       </li>

       <li>
        <label for="all">电脑</label>
        <input type="checkbox"  > 
       </li>

       <li>
        <label for="all">平板</label>
        <input type="checkbox"  > 
       </li>

       <li>
        <label for="all">相机</label>
        <input type="checkbox"  > 
       </li>
   </ul>

2.js代码

 // 当 全选 checkbox 改变时 （change事件）  获取 checked 值 --（prop）
       $("#all").change(function(){
          var allVal= $(this).prop("checked") ;// true /false
           $("#ul :checkbox").prop("checked",allVal)

        //  allVal ? $("#labelall").text("全不选"):  $("#labelall").text("全选")
            $("#labelall").text( allVal ? "全不选" : "全选" );
       })

       $("#ul :checkbox").change(function(){
        //    console.log(this);
            //比较选中多选框的数量和多选框的数量；
        //$("#ul :checked").length 选中的个数;  $("#ul  :checkbox").length 复选框个数
            if( $("#ul :checked").length  == $("#ul  :checkbox").length ){
                $("#all").prop("checked",true);
                //全选是显示全不选
                $("#labelall").text( "全不选"  );
            }else{
                $("#all").prop("checked",false);
                  //没有选择时显示 全选
                $("#labelall").text( "全选"  );
            }
       })