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

 <!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. usb需要做的工作

    1. QStringList qlist = var2.split('&', QString::SkipEmptyParts); if (qlist.size() >= 2) { usb ...

  2. 【Jquery】this和event.target的区别

    1.js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素: 2.this和event.target都是dom对象,如果要使用jque ...

  3. 喜讯！联诚发创始人龙平芳荣获2019LED行业优秀女企业家称号！联诚发横揽三项大奖！

           2019年12月20日,在深圳大梅沙京基喜来登度假酒店隆重举行“蝶变跨越”慧聪LED显示屏行业品牌盛会颁奖典礼!在来自全国各地的LED显示屏行业协会领导,企业领袖,精英代表以及来自全国各 ...

  4. rest_framework框架实现之（视图，路由，渲染器）

    一视图 一 在前面我们使用视图时继承的时APIview from rest_framework.response import Response from rest_framework.paginat ...

  5. Ubuntu 图形桌面死机重启（机器不重启）

    Ubuntu的图形界面容易死机,如果正在跑程序的话又不能重启.这时候可以通过终端来_重启_图形界面. 首先按Alt+Ctrl+F1进入终端界面.查看图形界面的进程: ps -t tty7 查看到名为X ...

  6. 【JavaWeb项目】一个众筹网站的开发（七）后台用户菜单

    mvn命令不能运行: jar-war-pom之间是可以直接写,优先找这个工程,而不是仓库的位置 pom-pom子父关系,需要去仓库中找,我们需要使用<relativePath>../pro ...

  7. selenium基本元素定位-findElement(By.*)

    selenium基本元素的定位和操作 一. 查找元素 1.1 findElement(By.id) // by——>定位器——>以某种方式去找元素 driver.findElement(b ...

  8. 基于aop的日志记录方式实现

    说明 最近有个项目需要增加日志记录功能,因为这个项目原来是基于spring开发的,在查阅了相关资料以后,我采用了spring aop的方式实现该需求,然后就有了本篇文章. 思路 我这边需求是这样的:要 ...

  9. 笨办法学Python记录--习题37 异常，lambda，yield，转义序列

    习题中提到了raise,查了下,顺便所有异常类关键字罗列如下文章中: 为什么使用异常 错误处理.事件通知.特殊情况处理.退出时的行为.不正常的程序流程. 简单的示例 在没有任何定义x变量的时候: pr ...

  10. PHP 图形验证码

    一段生成图形验证码的代码,向原创作者致谢. 1.将以下代码保存为 txm.php ,注:直接运行该页面是没有结果的,要用另一页面引用,请看步骤2 <?php session_start(); $ ...