js实现过程

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         li {

             height: 30px;

             line-height:30px;

             list-style: none;

             font-size: 24px;

         }

         .b1 {

             background: #CCCCCC;

         }

         .b2 {

             background: yellow;

         }

         .b3 {

             background: orange;

         }

         .b4 {

             background: red;

         }

     </style>

     <script>

         /*

         * 当鼠标移入li的时候

         *   当前li对应的checkbox是否是选中的

         *       是：li的className = 'b4'

         *       否：li的className = 'b3'

         * 当鼠标移出li的时候

         *   当前li对应的checkbox是否是选中的

         *       是：li的className = 'b4'

         *       否：li的className = 原来隔行变色的时候设置的class

         * */

         window.onload = function() {

             var ul1 = document.getElementById('ul1');

             var lis = document.querySelectorAll('li');

             var checkBoxes = ul1.querySelectorAll('input');

             var checkAll = document.getElementById('checkAll');

             //给每一个li添加不同的样式

             for (var i=0; i<lis.length; i++) {

                 lis[i].index = i;

                 checkBoxes[i].index = i;

                 //通过i%2判断i是奇数还是偶数

                 if ( i % 2 == 0 ) {

                     lis[i].className = 'b1';

                     lis[i].bc = 'b1';

                 } else {

                     lis[i].className = 'b2';

                     lis[i].bc = 'b2';

                 }

                 //当鼠标移入的时候

                 lis[i].onmouseover = function() {

                     if ( checkBoxes[this.index].checked == true ) {

                         this.className = 'b4';

                     } else {

                         this.className = 'b3';

                     }

                 }

                 //当鼠标移出的时候

                 lis[i].onmouseout = function() {

                     if ( checkBoxes[this.index].checked == true ) {

                         this.className = 'b4';

                     } else {

                         this.className = this.bc;

                     }

                 }

                 checkBoxes[i].onclick = function() {

                     if ( this.checked == true ) {

                         lis[this.index].className = 'b4';

                     }

                     var isCheckedAll = true;

                     for (var i=0; i<checkBoxes.length; i++) {

                         //console.log(checkBoxes[i].checked)

                         if (checkBoxes[i].checked == false) {

                             isCheckedAll = false;

                         }

                     }

                     console.log(isCheckedAll)

                     checkAll.checked = isCheckedAll;

                 }

             }

             //全选

             checkAll.onclick = function() {

                 for (var i=0; i<checkBoxes.length; i++) {

                     checkBoxes[i].checked = this.checked;

                     if (this.checked) {

                         lis[i].className = 'b4';

                     } else {

                         lis[i].className = lis[i].bc;

                     }

                 }

             }

         }

     </script>

 </head>

 <body>

 <div id="ul1">

     <li><input type="checkbox"> javascript</li>

     <li><input type="checkbox"> html</li>

     <li><input type="checkbox"> css</li>

     <li><input type="checkbox"> html5</li>

     <li><input type="checkbox"> css3</li>

     <li><input type="checkbox"> nodejs</li>

 </div>

 <input type="checkbox" id="checkAll">全选

 </body>

 </html>

jq的写法：

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="utf-8">

         <script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

         <script type="text/javascript">

         //高版本的jq库有个bug。低版本的jq中是可以的

         $(function(){

             var chkAll = $('#chkAll');

             var chkNone = $('#chkNone');

             var chkReverse = $('#chkReverse');

             var checkbox = $('#checkbox>:checkbox');

             console.log(checkbox);

             chkAll.click(function(){

                 //checkbox.attr('checked','checked');

                 checkbox.attr('checked',true);

             });

             chkNone.click(function(){

                 //checkbox.removeAttr('checked');

                 checkbox.attr('checked',false);

             });

             chkReverse.click(function(){

                 checkbox.each(function(){

                     $(this).attr('checked',!$(this).attr('checked'));

                 });

             });

         });

         </script>

     </head>

     <body>

         <div id="checkbox">

             <input type="checkbox" name="" id="" checked="checked">吃

             <input type="checkbox" name="" id="">喝

             <input type="checkbox" name="" id="">玩

             <input type="checkbox" name="" id="">乐

             <input type="checkbox" name="" id="">打豆豆

         </div>

         <div id="btn">

             <input type="button" id="chkAll" value="全选">

             <input type="button" id="chkNone" value="全不选">

             <input type="button" id="chkReverse" value="反选">

         </div>

     </body>

 </html>

分别用js和jq实现百度全选反选效果的更多相关文章

  1. Jquery 1.8全选反选删除选中项实现

    JQuery1.6以后,Prop的出现,让1.6以下的全选反选效果全部失效了.以下是修正后的版本: 全选反选效果: $(".checkbox").click(function () ...

  2. js和jq实现全选反选

    在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <tab ...

  3. 基于JQ的多选/全选/反选及获取选中的值

    <!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...

  4. jquery、js操作checkbox全选反选

    全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

  5. jquery、js全选反选checkbox

    操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...

  6. JS全选反选功能

    总选框:<input type="checkbox" class="all" name="all"> 子选框: <inpu ...

  7. js全选 反选

    // 全选 反选 allChoose: function (o) { var obj = $.extend(true, { id: "#id", name: "name& ...

  8. jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例

    一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...

  9. jQuery全选/反选checkbox

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. c++ 拷贝构造练习

    #include<iostream> using namespace std; class Vector { private: int *dwp; int size; void clone ...

  2. 【排障】Outlook Express 2G收件箱大小限制

    Outlook Express 2G收件箱大小限制 文:铁乐猫 ----------------------------- Outlook Express(以下简称OE)客户端收件箱大于或接近2G时, ...

  3. linux云计算集群架构学习笔记:workstation 12.0 按装Red Hat Enterprise Linux 7(64位)

    安装RHEL7.2 步骤: 1.安装虚拟机,按以下截图安装即可  步骤2: Ret hat 7.2 操作系统安装 rhel7因为许可报错解决

  4. CyclicBarrier 使用说明

    字面意思回环栅栏,通过它可以实现让一组线程等待至某个状态之后再全部同时执行.叫做回环是因为当所有等待线程都被释放以后,CyclicBarrier可以被重用.   主要方法:      public i ...

  5. rownum与rowId

      一.RowNum Rownum是oracle生成结果集时得到的一个伪列, 按照读出行的顺序, 第一条rownum=1, 第二条=2. 对于 Oracle 的 rownum 问题,很多资料都说不支持 ...

  6. MYSQL交换两列数据实例

    UPDATE cf_2015_company a, cf_2015_company bSET a.cname = b.linkman, a.linkman = b.cnameWHERE a.id = ...

  7. 用js对象创建链表

    //以下是一个链表类 function LinkedList(){ //Node表示要加入列表的项 var Node=function(element){ this.element=element; ...

  8. 《编写高质量代码》CSS部分总结

    如何组织CSS 三层结构:base+common+page 分层目的:减少代码量:便于多人开发和维护 1.base层 最底层,一般设置文件为只读,与具体的UI无关,提供: reset功能.因为浏览器对 ...

  9. 汇总文件数据 VBA

    1 读取30个文件的数据信息 2 根据4个key值,判断累计数据 3 做sum , avg Sub 月汇总() Dim MyPath, MyName, AWbName Dim Wb As Workbo ...

  10. spring中加入log4j

    spring中加入log4j <context-param> <param-name>log4jConfigLocation</param-name> <pa ...