jQuery实现全选与全部选

为了便于用户理解，直接粘贴下面的代码即可

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <link rel="stylesheet" href="../css/font-awname.css">
     <style>
         *{
             margin: ;
             padding:;
             list-style: none;
         }
         .boxs{
             margin: 20px  10px 20px;
         }
         /*导出文件*/
         #downLoad{
             width:90px;
             height: 30px;
             background-color: #3aa1ff;
             color: #fff;
             text-align: center;
             line-height: 30px;
             cursor: pointer;
         }
         /*方法二方式*/
         .waysTwo{
             margin-top: 20px;
         }
         .waysTwo li{
             width: 20px;
             height: 20px;
             border: 1px solid #ccc;
             margin-top: 5px;
             color: #fff;
         }
         .waysTwo li:hover{
             border-color:#3aa1ff;
         }
         .boxBg{
             border: 1px solid #3aa1ff;
             background: #3aa1ff;
             color: #fff;
         }
     </style>
 </head>
 <body>
     <div class="boxs">
         <div id="downLoad"><i class="fa fa-upload" aria-hidden="true"></i>批量导出</div>
         <h3>全选与全不选方法二:</h3>
         <div class='waysOne'>
             <!-- 全选与全不选方法一 -->
             <ul id="main-demo">
                 <li ><input type="checkbox" id="sellectAll" name="sellectAll" title="写作" lay-skin="primary" >标题</li>
             </ul>
             <ul class="main-demo">
                 <li ><input class="selectBox" type="checkbox" name="selectBox" title="写作" lay-skin="primary"></li>
                 <li ><input  class="selectBox" type="checkbox" name="selectBox" title="写作" lay-skin="primary" ></li>
             </ul>
         </div>
         <hr>
     <h3>全选与全不选方法二:</h3>
         <!-- 全选与全不选方法二 -->
         <div class="waysTwo">
             <ul>
                 <li class="palyer-tit-check">
                     <i class="fa fa-check"></i>
                 </li>
             </ul>
             <ul>
                 <li class="palyer-table-check">
                     <i class="fa fa-check"></i>
                 </li>
                 <li class="palyer-table-check">
                     <i class="fa fa-check"></i>
                 </li>
                 <li class="palyer-table-check">
                     <i class="fa fa-check"></i>
                 </li>
             </ul>
         </div>
     </div>
 </body>
 <script src="../js/jquery.js"></script>
 <script>
     /*input绑定属性时注意事项：
         给input绑定checked属性时不能用attr()方法，绑定不成功；
         prop()可以绑定checked事件，打印的checked值为boolean值，绑定成功为true,反之，为false
      */
 //头部-全选
 $(document).on('click', '#sellectAll', function() {
     var checkedOfAll=$("#sellectAll").prop("checked");
     // alert(checkedOfAll);
     $("input[name='selectBox']").prop("checked", checkedOfAll);
 });
 //列表-单选
 $(document).on('click', '.selectBox', function() {
     var ths = $(this);
     if (ths.checked == false) {
         $("input[name=sellectAll]:checkbox").prop('checked', false);
     }
     else {
         var count = $("input[name='selectBox']:checkbox:checked").length;
         if (count == $("input[name='selectBox']:checkbox").length) {
             $("input[name=sellectAll]:checkbox").prop("checked", true);
         }else{
             $("input[name=sellectAll]:checkbox").prop("checked", false);
         }
     }
 });

 // 方法二
 //顶部-全选按钮
 var titCheck = $('.palyer-tit-check');
 var tableCheck = $('.palyer-table-check');
 titCheck.on('click', function(){
     if($(this).hasClass('boxBg')){
         $(this).removeClass('boxBg');
         tableCheck.removeClass('boxBg');
         return false;
     }
     $(this).addClass('boxBg');
     tableCheck.addClass('boxBg');
 });

 //列表-单选按钮
 console.log(tableCheck.length);
 tableCheck.on('click', function(){
     if($(this).hasClass('boxBg')){
         $(this).removeClass('boxBg');
         return false;
     }
     $(this).addClass('boxBg');
 });

 /*批量导出*/
 $(document).on('click', '#downLoad', function() {
     if (titCheck.hasClass('boxBg') || tableCheck.hasClass('boxBg')){
         //下载执行的事件
     }
 });
 </script>
 </html>