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. iOS之pch文件的正确使用

    在Xcode6之前,创建一个新工程xcode会在Supporting files文件夹下面自动创建一个“工程名-Prefix.pch”文件,也是一个头文件,pch头文件的内容能被项目中的其他所有源文件 ...

  2. Java中double类型数据的精度问题

    今天在写段代码模拟计算器的时候,偶然发现,当我进行小数运算的时候,竟然出现了令我惊讶的结果,后来问了问度娘,才晓得,原来这里面还有点知识呢,下面是介绍: 你猜下面几句的结果是多少? public cl ...

  3. android开发之路01

    一.android系统被分为4个层次:1.最下层的是linux核心,包括多个驱动程序,提供了操作系统应该具备的核心功能:2.在linux核心之上,包括两个部分,一部分是Android Runtime( ...

  4. JAVA_java关联源码

    java怎样关联源码?? 1,按住control键,点一下你要看源码的类,跳到如下界面: 2,单击,跳到下一个界面 3,继续,找到jdk按照路径,找到src.zip文件 4. 4. 点击OK就可以看源 ...

  5. mysql数据库常用语句

    关于mysql数据库常用命令的整理: 一:对于数据库的操作 show databases;显示当前用户下所有的数据库名称 use database_name;进入当前数据库 create databa ...

  6. 史上最全的phpstorm常用配置

    取消自动保存并标识修改的文件为星星标记 1.取消自动保存 进入 File -> Settings -> General,取消下面两选项的勾选: 2.星星标记 进入 File -> S ...

  7. [原创]HTML标签总结！！ 第一次画 尚需要改进 多关照

    HTML 页面标签总结  拿xMind写了一下午总结的   只能传图片了   CSS明天整理  后天看看能不能传上来 //======================================= ...

  8. 对象创建型模式------Abstract Factory(抽象工厂）

    1. 意图    提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类.2. 别名    Kit3. 动机        假设我们要开发一款游戏,当然为了吸引更多的人玩,游戏难度不能太大 ...

  9. Java多线程编程总结（学习博客）

    Java多线程编程总结:网址:http://lavasoft.blog.51cto.com/62575/27069/

  10. UIButton 按钮文字左对齐

    btn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft; btn.titleEdgeInsets = UIEd ...