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

 <!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. 前端学习(十九）jquery（笔记）

    jquery:库,框架 js,别人封装成的js 官网:http://jquery.com/ -----------------------------------1.7 ----------jq 1. ...

  2. 【leetcode】bash脚本练习

    [192]Word Frequency Write a bash script to calculate the frequency of each word in a text file words ...

  3. js 实现 间隙滚动效果

    代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  4. kNN算法和决策树

    的整数. 下面看书上给出的实例: from numpy import * import operator def createdataset(): group=array([[1.0,1.1],[1. ...

  5. javaWEB 之文件的上传

    1.1 文件上传三要素 提供form表单,method必须是post form表单的enctype必须是multipart/form-data 提供 input type=“file” 类型输入 1. ...

  6. 一场comet常规赛的台前幕后

    有出题的想法大概是#8比完之后,#8的比赛较易,应该是符合https://info.cometoj.com 上的常规赛难度说明. 我们几个觉得我们一定可以出质量更高的题. 那个时候在玩线段树的时碰巧想 ...

  7. Shiro学习（21）授予身份及切换身份

    在一些场景中,比如某个领导因为一些原因不能进行登录网站进行一些操作,他想把他网站上的工作委托给他的秘书,但是他不想把帐号/密码告诉他秘书,只是想把工作委托给他:此时和我们可以使用Shiro的RunAs ...

  8. DLL中使用字符串时的注意事项。

    library dll1; uses SysUtils, Classes; {$R *.res} function TESTDLL:string;stdcall; begin Result:='tes ...

  9. 关于performSelector调用和直接调用区别

    下面两段代码都在主线程中运行,我们在看别人代码时会发现有时会直接调用,有时会利用performSelector调用,今天看到有人在问这个问题,我便做一下总结, [delegate imageDownl ...

  10. ACdream 1157 （cdq分治）

    题目链接 Segments Time Limit: 4000/2000MS (Java/Others)Memory Limit: 20000/10000KB (Java/Others) Problem ...