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

 <!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. ASP.NET MVC 学习笔记之面向切面编程与过滤器

    AOP(面向切面)是一种架构思想,用于把公共的逻辑放到一个单独的地方,这样就不用每个地方都写重复的代码了.比如程序中发生异常,不用每个地方都try…catch 只要在Golbal的Applicatio ...

  2. C++中创建对象的时候加括号和不加括号的区别(转)

    c++创建对象的语法有----- 1 在栈上创建 MyClass a; 2 在堆上创建加括号 MyClass *a= new MyClass(); 3 不加括号 MyClass *a = new My ...

  3. leetcode-按奇偶排序数组II

    Python解决方法: class Solution(object): def sortArrayByParityII(self, A): j = 1 for i in xrange(0, len(A ...

  4. js设计模式——4.迭代器模式

    js设计模式——4.迭代器模式 代码演示 /*js设计模式——迭代器模式*/ class Iterator { constructor(container) { this.list = contain ...

  5. php开发面试题---数据库SQL调优的几种方式

    php开发面试题---数据库SQL调优的几种方式 一.总结 一句话总结: 创建索引:尽量避免使用or或者like,或者sql中的正则 存储查询中间结果 可以加sphinx搜索技术 查询优化 主从数据库 ...

  6. O(n)时间复杂度查找数组第二大元素

    分析:要求O(n)时间复杂度,不能用排序.可以设置两个临时变量分别保存当前最大值以及当前第二大的值,然后遍历数组,不断更新最大值和第二大的数值. 代码: bool findSec(vector< ...

  7. 记一次Tomcat运行失败记录

    记一次Tomcat运行失败记录 如图tomcat运行之后会出现这样的情况,在网上百度之后大部分都说的是web.xml或者其他配置文件的问题,但是根据网上修改了之后却还是老样子. 这里有比较好的网址可以 ...

  8. Java学习之DOS基础

    Dos命令行dir:列出当前目录下的文件和文件夹md :创建目录rd :删除目录cd :进入指定目录cd..:退回到上一级目录cd/:退回到根目录del:删除文件exit:退出dos命令行 进入dos ...

  9. SPOJ MAXMATCH - Maximum Self-Matching (FFT)

    题目链接:MAXMATCH - Maximum Self-Matching Description You're given a string s consisting of letters 'a', ...

  10. 前端（二）—— CSS的引入方式、长度与颜色单位、常用样式、选择器

    CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...