js实现过程

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <style>
  7.          li {
  8.              height: 30px;
  9.              line-height:30px;
  10.              list-style: none;
  11.              font-size: 24px;
  12.          }
  13.          .b1 {
  14.              background: #CCCCCC;
  15.          }
  16.          .b2 {
  17.              background: yellow;
  18.          }
  19.          .b3 {
  20.              background: orange;
  21.          }
  22.          .b4 {
  23.              background: red;
  24.          }
  25.      </style>
  26.      <script>
  27.          /*
  28.          * 当鼠标移入li的时候
  29.          *   当前li对应的checkbox是否是选中的
  30.          *       是：li的className = 'b4'
  31.          *       否：li的className = 'b3'
  32.          * 当鼠标移出li的时候
  33.          *   当前li对应的checkbox是否是选中的
  34.          *       是：li的className = 'b4'
  35.          *       否：li的className = 原来隔行变色的时候设置的class
  36.          * */
  37.          window.onload = function() {
  38.  
  39.              var ul1 = document.getElementById('ul1');
  40.              var lis = document.querySelectorAll('li');
  41.              var checkBoxes = ul1.querySelectorAll('input');
  42.              var checkAll = document.getElementById('checkAll');
  43.  
  44.              //给每一个li添加不同的样式
  45.              for (var i=0; i<lis.length; i++) {
  46.  
  47.                  lis[i].index = i;
  48.                  checkBoxes[i].index = i;
  49.  
  50.                  //通过i%2判断i是奇数还是偶数
  51.                  if ( i % 2 == 0 ) {
  52.                      lis[i].className = 'b1';
  53.                      lis[i].bc = 'b1';
  54.                  } else {
  55.                      lis[i].className = 'b2';
  56.                      lis[i].bc = 'b2';
  57.                  }
  58.  
  59.                  //当鼠标移入的时候
  60.                  lis[i].onmouseover = function() {
  61.                      if ( checkBoxes[this.index].checked == true ) {
  62.                          this.className = 'b4';
  63.                      } else {
  64.                          this.className = 'b3';
  65.                      }
  66.                  }
  67.  
  68.                  //当鼠标移出的时候
  69.                  lis[i].onmouseout = function() {
  70.                      if ( checkBoxes[this.index].checked == true ) {
  71.                          this.className = 'b4';
  72.                      } else {
  73.                          this.className = this.bc;
  74.                      }
  75.  
  76.                  }
  77.  
  78.                  checkBoxes[i].onclick = function() {
  79.                      if ( this.checked == true ) {
  80.                          lis[this.index].className = 'b4';
  81.                      }
  82.  
  83.                      var isCheckedAll = true;
  84.                      for (var i=0; i<checkBoxes.length; i++) {
  85.                          //console.log(checkBoxes[i].checked)
  86.                          if (checkBoxes[i].checked == false) {
  87.                              isCheckedAll = false;
  88.                          }
  89.                      }
  90.                      console.log(isCheckedAll)
  91.                      checkAll.checked = isCheckedAll;
  92.                  }
  93.  
  94.              }
  95.  
  96.              //全选
  97.              checkAll.onclick = function() {
  98.                  for (var i=0; i<checkBoxes.length; i++) {
  99.                      checkBoxes[i].checked = this.checked;
  100.                      if (this.checked) {
  101.                          lis[i].className = 'b4';
  102.                      } else {
  103.                          lis[i].className = lis[i].bc;
  104.                      }
  105.                  }
  106.              }
  107.  
  108.          }
  109.      </script>
  110.  </head>
  111.  <body>
  112.  
  113.  <div id="ul1">
  114.      <li><input type="checkbox"> javascript</li>
  115.      <li><input type="checkbox"> html</li>
  116.      <li><input type="checkbox"> css</li>
  117.      <li><input type="checkbox"> html5</li>
  118.      <li><input type="checkbox"> css3</li>
  119.      <li><input type="checkbox"> nodejs</li>
  120.  </div>
  121.  <input type="checkbox" id="checkAll">全选
  122.  
  123.  </body>
  124.  </html>

jq的写法：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
  6.          <script type="text/javascript">
  7.          //高版本的jq库有个bug。低版本的jq中是可以的
  8.          $(function(){
  9.              var chkAll = $('#chkAll');
  10.              var chkNone = $('#chkNone');
  11.              var chkReverse = $('#chkReverse');
  12.              var checkbox = $('#checkbox>:checkbox');
  13.              console.log(checkbox);
  14.  
  15.              chkAll.click(function(){
  16.                  //checkbox.attr('checked','checked');
  17.                  checkbox.attr('checked',true);
  18.              });
  19.              chkNone.click(function(){
  20.                  //checkbox.removeAttr('checked');
  21.                  checkbox.attr('checked',false);
  22.              });
  23.              chkReverse.click(function(){
  24.                  checkbox.each(function(){
  25.                      $(this).attr('checked',!$(this).attr('checked'));
  26.                  });
  27.              });
  28.  
  29.          });
  30.          </script>
  31.      </head>
  32.      <body>
  33.          <div id="checkbox">
  34.              <input type="checkbox" name="" id="" checked="checked">吃
  35.              <input type="checkbox" name="" id="">喝
  36.              <input type="checkbox" name="" id="">玩
  37.              <input type="checkbox" name="" id="">乐
  38.              <input type="checkbox" name="" id="">打豆豆
  39.          </div>
  40.          <div id="btn">
  41.              <input type="button" id="chkAll" value="全选">
  42.              <input type="button" id="chkNone" value="全不选">
  43.              <input type="button" id="chkReverse" value="反选">
  44.          </div>
  45.      </body>
  46.  </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. Intent的介绍

    一.Intent的介绍 Intent的中文意思是“意图,意向”,在Android中提供了Intent机制来协助应用间的交互与通讯,Intent负责对应用中一次操作 的动作.动作涉及数据.附加数据进行描 ...

  2. 利用C语言结构体模拟一个简单的JavaBean

    利用C语言模拟一个Javabean 仅封装了,“无参构造函数”,“带参构造函数”,"toString方法" #include <stdio.h> struct User ...

  3. 关于Ajax的实现

    AJAX:Asynchronous Javascript And XML.异步的JavaScript和XML. 同步请求: 异步请求: 1.1.1    XMLHttpRequest对象的介绍: 方法 ...

  4. hdu 1095 A+B for Input-Output Practice (VII)

    A+B for Input-Output Practice (VII) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32 ...

  5. 总结html5-canvas学习笔记

    canvas是html5中很重要的一部分,我们可以用它来绘制各种平面图形, 3d图,动画等等.每每看到网上超炫的html5页面,首先立马下载下来,心里想着有一天自己也可以做出这样酷炫的效果,骚年你是不 ...

  6. c# 远程监控（1） 大纲

    此篇文章主要讲了如何使用C# Winform程序模拟一个远程监控系统,并使用RTP实时传输协议传输数据. 应用场景:远程监控.局域网视频会议.客户端流式缓冲播放 这方面的资料还是有一些,但是都需要整合 ...

  7. Unity3D 之射线检测

    这里来记录下射线检测的相关内容: 射线检测故名就是通过射线去检测是否和碰撞器产生了交集,和碰撞器与碰撞器发生交集一样,会返回一个真. 射线的用法很多:比如检测是否跳跃,通过向地面投射射线控制在地面时候 ...

  8. seaJs 使用

    开始使用seajs的时候折磨了我好一阵.光是各种概念就让新手难理解.现在弄清楚了,上个实践以备忘.目录结构如图. 1.文件 sea.html   main.js  a.js  b.js  c.js 最 ...

  9. Colored Linux Man pages

    Colored Linux Man pages 一.什么是Linux Man 参考: 二.如何高效率地使用Man 三.给Linux Man命令添加点颜色. 1.Unix / Linux: Displa ...

  10. C++ 代码性能优化 -- 循环分割提高并行性

    对于一个可结合和可交换的合并操作来说,比如整数的加法或乘法, 我们可以通过将一组合并操作分割成 2 个或更多的部分,并在最后合并结果来提高性能. 原理: 普通代码只能利用 CPU 的一个寄存器,分割后 ...