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. linux内核编程学习——草稿

    第一章 1.1 文件IO c标准函数与系统函数的区别 FILE文件类型是一个结构体类型,包括文件描述符(inode).位置指针(f_pos).缓冲器(buffer)(8192byte). c标准文件函 ...

  2. PHP在ubuntu中编译安装

    关于怎么获取php源码和解压就不再说了. 编译的参数为: ./configure --prefix=/opt/php --with-bz2 --with-mcrypt --with-mhash --w ...

  3. 【转载】Git的安装与使用

    Git的安装与使用  转载来源:http://www.cnblogs.com/Bonker/p/3441781.html 1,下载git https://code.google.com/p/msysg ...

  4. js如何实现一定时间后去执行一个函数

    js如何实现一定时间后去执行一个函数:在实际需要中可能需要规定在指定的时间之后再去执行一个函数以达成期望的目的,这也就是一个定时器效果,恰好在js中就已经给定了这样的一个函数setTimeout(), ...

  5. JavaScript高级程序设计（第三版）学习笔记22、24、25章

    第22章,高级技巧 高级函数 安全的类型检测 typeof会出现无法预知的行为 instanceof在多个全局作用域中并不能正确工作 调用Object原生的toString方法,会返回[Object ...

  6. 一个类似repo的小程序

    #! /usr/bin/env python # -*- coding: utf-8 -*- # usage : python EasyRepo.py -u "13051041" ...

  7. C#集合之Hashtable

    Hashtable是一个键值对集合,其泛型版本是Dictionary<K, V>,下面说下常用的一些方法; 1.Add(),向Hashtable添加元素,需要注意的是因为它是键值对集合,所 ...

  8. IO流06_处理流

    [处理流] 处理流可以隐藏底层设备上节点流的差异,并对外提供更加方便的输入/输出的方法. 使用处理流的思路: 使用处理流来包装节点流,程序通过处理流来执行输入输出功能,让节点流与底层的I/O设备.文件 ...

  9. NSDate与 NSString 、long long类型的相互转化

    我的技术博客经常被流氓网站恶意爬取转载.请移步原文:http://www.cnblogs.com/hamhog/p/3560280.html,享受整齐的排版.有效的链接.正确的代码缩进.更好的阅读体验 ...

  10. Xml通用操作类

    using System; using System.Collections.Generic; using System.IO; using System.Text; using System.Xml ...