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. axel源码学习(0)——程序逻辑

    axel简介 axel是一个命令行下的轻量级http/ftp 下载加速工具,支持多线程下载和断点续传,支持从多个镜像下载同一文件. axel的用法如下: 图 0.1 axel usage axel 粗 ...

  2. [转]重新分配内置存储空间 android手机

    本文转自:http://www.in189.com/thread-815721-1-1.html 鉴于有些同学遇到问题了,毕竟步骤繁琐,可能中间会出错,因此推荐用26L       338944    ...

  3. WEB前端优化一些经验技巧

    引言: 1. 慢的页面可能会网站失去更多的用户. 2. 慢500ms意味着20%的用户将放弃访问(google) 3. 慢100ms意味着1%的用户将放弃交易(amazon) 前段时间偶然看到网上的两 ...

  4. 默认安装wamp修改MySQL密码

    首先,通过WAMP打开mysql控制台. 提示输入密码,因为现在是空,所以直接按回车. 然后输入“use mysql”,意思是使用mysql这个数据库,提示“Database changed”就行. ...

  5. scala学习笔记：理解lazy值

    scala> var counter = 0 counter: Int = 0 scala> def foo = {counter += 1; counter} foo: Int scal ...

  6. ASP.Net_入门准备

    基础篇:(学习能力取决于你的基础扎不扎实) 第一步 掌握一门.NET面向对象语言,C#或VB.NET 我强烈反对在没系统学过一门面向对象(OO)语言的前提下去学ASP.NET. ASP.NET是一个全 ...

  7. Android res资源文件夹的知识积累

    Android的开发框架耦合性还是比较低的,逻辑和布局被原生分开了.在Eclipse一般代码写在src文件夹下,资源等写在res文件夹下. drawable文件夹:该文件夹有很多变种,主要是为了适配A ...

  8. zxing.dll生成条码

    引入zxing.dll using System; using System.Drawing; using ZXing.QrCode; using ZXing; using ZXing.Common; ...

  9. 我的第一个html页面

    <!DOCTYPE html><meta charset="UTF-8"><title>第一个html5界面</title>< ...

  10. OC3_MyRect

    // // MyRect.h // OC3_MyRect // // Created by zhangxueming on 15/6/9. // Copyright (c) 2015年 zhangxu ...