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

 <!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. vue aliasConfig(模块别名配置)

    今天研究了下鹏哥搭建的项目代码,一个人捣鼓了半天模块别名配置,边写边测试,才慢慢明白,所有写下来当个笔记: 在vue项目中,经常根据需要引入不同的功能模块,默认情况下我们通过代码 import mod ...

  2. ASE: CODEnn Reproduce

    Background 第二次结对编程的任务是挑选一个用自然语言搜索相关代码片段的模型实现,并且可以提出自己的想法改进.这个任务很cool,前期做了不少调研.使用自然语言搜索相关代码片段现在是个很受关注 ...

  3. 【Javascript DOM读书笔记】chapter8 充实文档内容

    本章目的 作者举出了第一个实例,为一篇 web 页面动态创建缩略语(abbreviation)的列表.大家知道,我们可以使用 <abbr>...</abbr> 来指示一个缩略语 ...

  4. Android jniLibs下目录详解（.so文件）

    http://www.jianshu.com/p/b758e36ae9b5 最近又研究了一下,参考了一下:三星/联发科等处理器规格表 更新时间:2017年5月手机CPU架构体系分类及各大厂商 PS:我 ...

  5. PHP-组合总和

    给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的数字可以无限制重复被选 ...

  6. Tomcat启动后中文乱码，怎么解决这个问题

    今天很疑惑这个问题,于是去网上找了答案,结果是需要修改Tomcat根目录下面的"logging.properties"文件,把所有的encoding=UTF-8的改成encodng ...

  7. redux combineReducers的用法

    给这种 state 结构写 reducer 的方式是分拆成多个 reducer,拆分之后的 reducer 都是相同的结构(state, action),并且每个函数独立负责管理该特定切片 state ...

  8. 分考场（np完全问题，回溯法）

    问题描述 n个人参加某项特殊考试. 为了公平,要求任何两个认识的人不能分在同一个考场. 求是少需要分几个考场才能满足条件. 输入格式 第一行,一个整数n(1<n<100),表示参加考试的人 ...

  9. git常用操作命令归纳

    git开始 全局配置:配置用户名和e-mail地址 $ git config --global user.name"Your Name" $ git config --global ...

  10. 第十一次 LL(1)文法的判断，递归下降分析程序

    1. 文法 G(S): (1)S -> AB (2)A ->Da|ε (3)B -> cC (4)C -> aADC |ε (5)D -> b|ε 验证文法 G(S)是不 ...