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

 <!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>

jQuery实现全选与全部选的更多相关文章

  1. 11月8日下午Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  2. jQuery实现全选效果【转】

    这是一段用jquery实现全选的代码,主要思路如下: 1.所有的复选框都有单击事件,所有效果都是在单击事件下实现的 2.全选复选框所实现的功能与其他复选选项实现的功能不同,所有在单击事件内做一个判断, ...

  3. jquery的全选插件

    全选看起来挺简单的,要做得完美就不那么容易了. 目前,我的全选插件能做到以下6点: 1.点击全选checkbox,能将要选择的checkbox都选中.去掉全选按钮,能将所有的checkbox都不选.这 ...

  4. jQuery实现全选、全不选、反选

    如图,需要使用jQuery实现全选.全不选.反选功能: 核心代码: 全选 $("#check_all").click(function(){ $("input:check ...

  5. python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  6. jquery实现全选、反选、不选

    <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8&quo ...

  7. jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法

    如下图: <head> <title></title> <style type="text/css"> div { border: ...

  8. jquery checkbox全选，全不选，反选方法，jquery checkbox全选只能操作一次

    jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...

  9. Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  10. jQuery实现全选与全不选功能

    初始时: 实现功能后: 实现该功能的核心代码: <script> $(function(){ $("#selectBtn").click(function(){ con ...

随机推荐

  1. SQLServer存储过程学习记录

    简单来说,存储过程就是一条或者多条sql语句的集合,可视为批处理文件,但是其作用不仅限于批处理. 一.存储过程的概述 SQL Server中的存储过程是使用T_SQL编写的代码段.它的目的在于能够方便 ...

  2. BZOJ-3495 前缀优化建图2-SAT

    题意:有n个城镇被分成了k个郡,有m条连接城镇的无向边.要求给每个郡选择一个城镇作为首都,满足每条边至少有一个端点是首都. 解法:以前没学过,参考https://blog.csdn.net/linkf ...

  3. Codeforces 348C Subset Sums 分块思想

    题意思路:https://www.cnblogs.com/jianrenfang/p/6502858.html 第一次见这种思路,对于集合大小分为两种类型,一种是重集合,一种是轻集合,对于重集合,我们 ...

  4. Codeforces 1149C 线段树 LCA

    题意:给你一个括号序列,这个括号序列将确定一颗二叉树.有q次询问,每次询问输出这颗树的直径. 思路:https://blog.csdn.net/Huah_2018/article/details/89 ...

  5. 安装express 出现 错误

    w 在网上找了很多都解决不了问题,直到换了文件新建路径就可以了 成功: 学习就是不断发现问题解决问题的过程

  6. 【LeetCode 21】合并两个有序链表

    题目链接 [题解] 就是归并排序的一趟合并操作. 新建个链表加在上面就好.(用原来的链表的头结点也没问题) 加个头结点会比较好操作一点. 返回的时候返回头结点的next域就行 [代码] /** * D ...

  7. 思维构造+匹配——cf1199E

    直接枚举每条边,如果边加到图中后还是个匹配图,就直接加,反之就不加 这样加完所有边后,剩下的点必定可以组成一个独立集:因为如果剩下的点中还有互相匹配的,那么这对点应该在加边时就被算到匹配图中 所以要么 ...

  8. JS中的call()、apply() 以及 bind()方法用法总结

    JS中的call()方法和apply()方法用法总结  : 讲解: 调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域. function add(c,d){ return thi ...

  9. 排序算法（一） 插入排序及Java实现

    代码实现: public void insertionSort(List<T> list, Comparator<T> comparator) { for (int i=1; ...

  10. CSS：CSS padding（填充）

    ylbtech-CSS:CSS padding(填充) 1.返回顶部 1. CSS padding(填充) CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的 ...