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. 【转】SQL Server 2012 配置AlwaysOn(三)

    转载自:http://www.cnblogs.com/lyhabc/p/4682986.html 从0开始搭建SQL Server AlwaysOn 第三篇(配置AlwaysOn) 第一篇http:/ ...

  2. Linux shell之数组

    引言 在Linux平台上工作,我们经常需要使用shell来编写一些有用.有意义的脚本程序.有时,会经常使用shell数组.那么,shell中的数组是怎么表现的呢,又是怎么定义的呢?接下来逐一的进行讲解 ...

  3. 初识 Lucene

    Lucene是一个信息检索工具库,而不是一个完整的搜索程序 搜索程序 Lucene索引核心类 Lucene索引核心类: Document: 文档对象代表一些域(field)的集合 Field: 每个文 ...

  4. 虚反矩阵指令pinv之应用

    pinv指令     在多数解的例子中,有时并不是仅要将其中一变数设定为零之解.为使整个系统得到最佳化,亦可利用pinv指令求得最小模组之合理解.pinv(A)又称为虚反矩阵(pseudoinvers ...

  5. matlab——sparse函数和full函数（稀疏矩阵和非稀疏矩阵转换）

    函数功能:生成稀疏矩阵 使用方法 :S = sparse(A) 将矩阵A转化为稀疏矩阵形式,即矩阵A中任何0元素被去除,非零元素及其下标组成矩阵S.如果A本身是稀疏的,sparse(S)返回S. S ...

  6. [转载]ubuntu Atheros Communications Device 1083 驱动

    Ubuntu 版本: Ubuntu server 10.10 在2016-03-26 上午时,拆开公司一台server电脑的CPU风扇不转,电源都烧掉了(潮湿的原因)... 在2016-03-28 打 ...

  7. 【JQuery基础教程(第三版)图灵】笔记

    第1章 jQuery入门 1.jQuery官方网站:http://jquery.com   2.开发工具:Firebug         第2章 选择元素 1.属性选择符:属性选择符通过HTML元素的 ...

  8. 收回动态VHD的未使用空间

    随着虚拟机的运行,虚拟机磁盘所占空间越来越大,而实际使用并没有那么大,考虑回收未使用部分. 收回动态VHD的未使用空间(压缩VHD) 有一种方法是ghost,两个vhd文件对拷.本文不是那个方法 本文 ...

  9. UDP 多播 Java

    1.服务端 public class UdpMulticastServer { /** * @param args */ public static void main(String[] args) ...

  10. java多线程总结四：volatile、synchronized示例

    1.synchronized保证同步 先看一个生成偶数的类 <span style="font-size:16px;">package demo.thread; /** ...