练习地址:http://www.fgm.cc/learn/lesson2/12.html

总结:

1.  && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句。 相当于if(oInput[i].checked) {n++;}

  1. oInput[i].checked && n++

2. n == oInput.length - 1;   这句话先判断 n是不是等于oInput.length - 1  (即checkbox全都选中了)? 返回值 true/false ,再赋值给左边的oInput[0].checked

记住:这种类似于三元表达式的,都是先判断右边,再赋值给左边。

  1. oInput[0].checked = n == oInput.length - 1;

3. 文字变化:全选/全不选, 也是公共事件,所以应该提取到公共函数里。 而不是单独给每个事件都加。

  1. oBtn_selectAll.onclick = function()
  2. {
  3. checkOrNot(aBox);
  4. // oTxt_selectAll.innerHTML = oBtn_selectAll.checked? "全不选" : "全选";
  5. // 这个应该放到公共函数里,因为点其他checkbox,或者点 反选,都会引起文字变化。
  6. };

疑问:

这个函数用var的形式写在window.onload里, 和用function写在window onload外面,区别是???

  1. var checkOrNot = function ()
  2. {
  3. for(let i=0; i<aBox.length; i++)
  4. {
  5. if(oBtn_selectAll.checked==true)
  6. {
  7. aBox[i].checked = true;
  8. }
  9. else
  10. {
  11. aBox[i].checked = false;
  12. };
  13.  
  14. oTxt_selectAll.innerHTML = oBtn_selectAll.checked? "全不选" : "全选";
  15. };
  16. };

示例程序:

  1. <script type="text/javascript">
  2.  
  3. window.onload = function ()
  4. {
  5. var oA = document.getElementsByTagName("a")[0];
  6. var oInput = document.getElementsByTagName("input");
  7. var oLabel = document.getElementsByTagName("label")[0];
  8.  
  9. var isCheckAll = function ()
  10. {
  11. for (var i = 1, n = 0; i < oInput.length; i++)
  12. {
  13. oInput[i].checked && n++
  14. // && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句。
  15. // 相当于if(oInput[i].checked) {n++;}
  16. }
  17. oInput[0].checked = n == oInput.length - 1;
  18.  
  19. // n == oInput.length - 1; 返回值 true/false 赋值给左边。
  20.  
  21. // 记住:这种类似于三元表达式的,都是先判断右边,再赋值给左边。
  22.  
  23. oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"
  24. };
  25.  
  26. //全选/全不选
  27. oInput[0].onclick = function ()
  28. {
  29. for (var i = 1; i < oInput.length; i++)
  30. {
  31. oInput[i].checked = this.checked
  32. }
  33. isCheckAll()
  34. };
  35. //反选
  36. oA.onclick = function ()
  37. {
  38. for (var i = 1; i < oInput.length; i++)
  39. {
  40. oInput[i].checked = !oInput[i].checked
  41. }
  42. isCheckAll()
  43. };
  44. //根据复选个数更新全选框状态
  45. for (var i = 1; i < oInput.length; i++)
  46. {
  47. oInput[i].onclick = function ()
  48. {
  49. isCheckAll()
  50. }
  51. }
  52. }
  53. </script>

自己的:

(逻辑还没完全理清,还要重写)

  1. <script>
  2. window.onload = function()
  3. {
  4. var oBtn_selectAll = document.getElementsByTagName('input')[0];
  5. var oTxt_selectAll = document.getElementsByTagName('strong')[0];
  6. var oBtn_selectOrNot = document.getElementsByTagName('span')[0];
  7. var aBox = document.getElementsByTagName('ul')[0].getElementsByTagName('input');
  8.  
  9. var checkOrNot = function ()
  10. // 这个函数用var的形式写在window.onload里, 和用function写在window onload外面,区别是???
  11. {
  12. for(let i=0; i<aBox.length; i++)
  13. {
  14. if(oBtn_selectAll.checked==true)
  15. {
  16. aBox[i].checked = true;
  17. }
  18. else
  19. {
  20. aBox[i].checked = false;
  21. };
  22.  
  23. oTxt_selectAll.innerHTML = oBtn_selectAll.checked? "全不选" : "全选";
  24. };
  25. };
  26.  
  27. // 下面是范例公共函数部分的用法
  28.  
  29. var isCheckAll = function ()
  30. {
  31. for (var i = 1, n = 0; i < oInput.length; i++)
  32. {
  33. oInput[i].checked && n++
  34. // && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句。
  35. // 相当于if(oInput[i].checked) {n++;}
  36. }
  37. oInput[0].checked = n == oInput.length - 1;
  38.  
  39. // n == oInput.length - 1; 返回值 true/false 赋值给左边。
  40.  
  41. // 记住:这种类似于三元表达式的,都是先判断右边,再赋值给左边。
  42.  
  43. oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"
  44. };
  45.  
  46. // 全选/全不选
  47. oBtn_selectAll.onclick = function()
  48. {
  49. checkOrNot(aBox);
  50. // oTxt_selectAll.innerHTML = oBtn_selectAll.checked? "全不选" : "全选";
  51. // 这个应该放到公共函数里,因为点其他checkbox,或者点 反选,都会引起文字变化。
  52. };
  53.  
  54. // 反选
  55. oBtn_selectOrNot.onclick = function()
  56. {
  57. oBtn_selectAll.checked = oBtn_selectAll.checked == true? false:true;
  58.  
  59. checkOrNot(aBox);
  60. };
  61. };
  62. </script>

JS学习笔记 - fgm练习 2-12- 全选反选 判断CheckBox是否选中 &&运算符的更多相关文章

  1. JS学习笔记 - fgm练习 2-11- 改变图片路径 var img = new Image(); 图片预加载

    <style> *{ margin: 0;padding: 0; list-style: none; } body{ background: black; } .outer{ margin ...

  2. JS学习笔记 - fgm练习 2-5 - 函数传参 设置div样式

    练习地址:http://www.fgm.cc/learn/lesson2/05.html <script> window.onload = function(){ var oDiv = d ...

  3. JS学习笔记 - fgm练习 - 输入数字求和 正则replace onkeyup事件

    <style> body{font-size: 12px;} .outer{ width: 500px; margin: 0 auto; } span{ color: #999; } in ...

  4. JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变

    思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div ...

  5. JS学习笔记 - fgm练习 - 数字自增 定时器 数字比大小Math.max

    <script> window.onload = function(){ var oP = document.getElementsByTagName('p')[0]; var i = 0 ...

  6. JS学习笔记 - fgm练习 - 限制输入框的字符类型 正则 和 || 或运算符的运用 i++和++i

    <script> window.onload = function(){ var aInp = document.getElementsByTagName('input'); var oS ...

  7. JS学习笔记 - fgm练习 - 输入法下拉框 三元表达式

    <script> window.onload = function() { var oBtn = document.getElementsByTagName('input')[0]; va ...

  8. JS学习笔记 - fgm练习 - 网页换肤

    总结: 1. 点击按钮,div内部变色,边框保持颜色不变. 实现原理:其实本来就把background 和 border 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的. 那么点击的时候,只 ...

  9. JS学习笔记 - fgm练习 - 多按钮控制同个div属性

    总结: 1. 注意body里的结构安排,全部装在大div,避免多次设置不同部分居中. 2. 一排按钮居中:装在大div里,text-align: center; 3. 把相同的部分封装成函数,即 同个 ...

随机推荐

  1. drbd脑裂

    环境: Primary    节点:node1Secondary  节点:node2 DRBD产生脑裂的原因:    (1. 采用HA环境的时候自动切换导致脑裂;    (2. 人为操作或配置失误,导 ...

  2. jq PC做滚动效果经常用到的各类参数【可视区判断】

    获取 浏览器显示区域 (可视区域)的高度 :  $(window).height();  获取浏览器显示区域(可视区域)的宽度 :  $(window).width();  获取页面的文档高度: $( ...

  3. 使用scatter画散点图

    刚开始接触Python,照着例子写的代码,百度注释的. from numpy import * import matplotlib import matplotlib.pyplot as plt im ...

  4. CocoaPods制作

    欢迎相同喜欢动效的工程师/UI设计师/产品添加我们 iOS动效特攻队–>QQ群:547897182 iOS动效特攻队–>熊熊:648070256 引言: 折腾了三四天,各种文章翻遍了,遇到 ...

  5. 【剑指offer】Q25:二叉树中和为某一值的路径

    说明:最烦的就是看别人的博客,题解里直接上代码,一行分析都没有.只是这个题... class BTNode(): def __init__(self, val = -1): self.val = va ...

  6. centos 6.7下安装rabbitmq 3.6.6过程

    准备,请确保有root权限或者sudo权限,不然不用继续看下去了. 1.erland的安装 首先测试一下是否已经安装了erlang,命令 rpm -qa | grep erlang 若没有安装,则 y ...

  7. Android 实现QQ、微信、新浪微博和百度第三方登录

    前言: 对于大多数的APP都有第三方登录这个功能,自己也做过几次,最近又有一个新项目用到了第三方登录,所以特意总结了一下关于第三方登录的实现,并拿出来与大家一同分享: 各大开放平台注册账户获取AppK ...

  8. deep-in-es6(三)

    模板字符串:反撇号(`)包起来的内容. eg: var str = `assassin`; console.log(str); 模板占位符:${};可达到数据的渲染,在占位符中可以是表达式,运算符,函 ...

  9. python3 import Crypto 失败的解决办法 (AES对称加密使用 模块)

    # 先导入所需要的包 pip3 install Crypto # 再安装pycrypto pip3 install pycrypto from Crypto.Cipher import AES # 就 ...

  10. 小米开源文件管理器MiCodeFileExplorer-源码研究(6)-媒体文件MediaFile和文件类型MimeUtils

    接着之前的第4篇,本篇的2个类,仍然是工具类.MediaFile,媒体文件,定义了一大堆的常量,真正的有用的方法就几个.isAudioFileType.isVideoFileType之类的. Mime ...