JS学习笔记 - fgm练习 2-12- 全选反选 判断CheckBox是否选中 &&运算符
练习地址:http://www.fgm.cc/learn/lesson2/12.html
总结:
1. && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句。 相当于if(oInput[i].checked) {n++;}
- oInput[i].checked && n++
2. n == oInput.length - 1; 这句话先判断 n是不是等于oInput.length - 1 (即checkbox全都选中了)? 返回值 true/false ,再赋值给左边的oInput[0].checked
记住:这种类似于三元表达式的,都是先判断右边,再赋值给左边。
- oInput[0].checked = n == oInput.length - 1;
3. 文字变化:全选/全不选, 也是公共事件,所以应该提取到公共函数里。 而不是单独给每个事件都加。
- oBtn_selectAll.onclick = function()
- {
- checkOrNot(aBox);
- // oTxt_selectAll.innerHTML = oBtn_selectAll.checked? "全不选" : "全选";
- // 这个应该放到公共函数里,因为点其他checkbox,或者点 反选,都会引起文字变化。
- };
疑问:
这个函数用var的形式写在window.onload里, 和用function写在window onload外面,区别是???
- var checkOrNot = function ()
- {
- for(let i=0; i<aBox.length; i++)
- {
- if(oBtn_selectAll.checked==true)
- {
- aBox[i].checked = true;
- }
- else
- {
- aBox[i].checked = false;
- };
- oTxt_selectAll.innerHTML = oBtn_selectAll.checked? "全不选" : "全选";
- };
- };
示例程序:
- <script type="text/javascript">
- window.onload = function ()
- {
- var oA = document.getElementsByTagName("a")[0];
- var oInput = document.getElementsByTagName("input");
- var oLabel = document.getElementsByTagName("label")[0];
- var isCheckAll = function ()
- {
- for (var i = 1, n = 0; i < oInput.length; i++)
- {
- oInput[i].checked && n++
- // && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句。
- // 相当于if(oInput[i].checked) {n++;}
- }
- oInput[0].checked = n == oInput.length - 1;
- // n == oInput.length - 1; 返回值 true/false 赋值给左边。
- // 记住:这种类似于三元表达式的,都是先判断右边,再赋值给左边。
- oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"
- };
- //全选/全不选
- oInput[0].onclick = function ()
- {
- for (var i = 1; i < oInput.length; i++)
- {
- oInput[i].checked = this.checked
- }
- isCheckAll()
- };
- //反选
- oA.onclick = function ()
- {
- for (var i = 1; i < oInput.length; i++)
- {
- oInput[i].checked = !oInput[i].checked
- }
- isCheckAll()
- };
- //根据复选个数更新全选框状态
- for (var i = 1; i < oInput.length; i++)
- {
- oInput[i].onclick = function ()
- {
- isCheckAll()
- }
- }
- }
- </script>
自己的:
(逻辑还没完全理清,还要重写)
- <script>
- window.onload = function()
- {
- var oBtn_selectAll = document.getElementsByTagName('input')[0];
- var oTxt_selectAll = document.getElementsByTagName('strong')[0];
- var oBtn_selectOrNot = document.getElementsByTagName('span')[0];
- var aBox = document.getElementsByTagName('ul')[0].getElementsByTagName('input');
- var checkOrNot = function ()
- // 这个函数用var的形式写在window.onload里, 和用function写在window onload外面,区别是???
- {
- for(let i=0; i<aBox.length; i++)
- {
- if(oBtn_selectAll.checked==true)
- {
- aBox[i].checked = true;
- }
- else
- {
- aBox[i].checked = false;
- };
- oTxt_selectAll.innerHTML = oBtn_selectAll.checked? "全不选" : "全选";
- };
- };
- // 下面是范例公共函数部分的用法
- var isCheckAll = function ()
- {
- for (var i = 1, n = 0; i < oInput.length; i++)
- {
- oInput[i].checked && n++
- // && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句。
- // 相当于if(oInput[i].checked) {n++;}
- }
- oInput[0].checked = n == oInput.length - 1;
- // n == oInput.length - 1; 返回值 true/false 赋值给左边。
- // 记住:这种类似于三元表达式的,都是先判断右边,再赋值给左边。
- oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"
- };
- // 全选/全不选
- oBtn_selectAll.onclick = function()
- {
- checkOrNot(aBox);
- // oTxt_selectAll.innerHTML = oBtn_selectAll.checked? "全不选" : "全选";
- // 这个应该放到公共函数里,因为点其他checkbox,或者点 反选,都会引起文字变化。
- };
- // 反选
- oBtn_selectOrNot.onclick = function()
- {
- oBtn_selectAll.checked = oBtn_selectAll.checked == true? false:true;
- checkOrNot(aBox);
- };
- };
- </script>
JS学习笔记 - fgm练习 2-12- 全选反选 判断CheckBox是否选中 &&运算符的更多相关文章
- JS学习笔记 - fgm练习 2-11- 改变图片路径 var img = new Image(); 图片预加载
<style> *{ margin: 0;padding: 0; list-style: none; } body{ background: black; } .outer{ margin ...
- JS学习笔记 - fgm练习 2-5 - 函数传参 设置div样式
练习地址:http://www.fgm.cc/learn/lesson2/05.html <script> window.onload = function(){ var oDiv = d ...
- JS学习笔记 - fgm练习 - 输入数字求和 正则replace onkeyup事件
<style> body{font-size: 12px;} .outer{ width: 500px; margin: 0 auto; } span{ color: #999; } in ...
- JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变
思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div ...
- JS学习笔记 - fgm练习 - 数字自增 定时器 数字比大小Math.max
<script> window.onload = function(){ var oP = document.getElementsByTagName('p')[0]; var i = 0 ...
- JS学习笔记 - fgm练习 - 限制输入框的字符类型 正则 和 || 或运算符的运用 i++和++i
<script> window.onload = function(){ var aInp = document.getElementsByTagName('input'); var oS ...
- JS学习笔记 - fgm练习 - 输入法下拉框 三元表达式
<script> window.onload = function() { var oBtn = document.getElementsByTagName('input')[0]; va ...
- JS学习笔记 - fgm练习 - 网页换肤
总结: 1. 点击按钮,div内部变色,边框保持颜色不变. 实现原理:其实本来就把background 和 border 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的. 那么点击的时候,只 ...
- JS学习笔记 - fgm练习 - 多按钮控制同个div属性
总结: 1. 注意body里的结构安排,全部装在大div,避免多次设置不同部分居中. 2. 一排按钮居中:装在大div里,text-align: center; 3. 把相同的部分封装成函数,即 同个 ...
随机推荐
- drbd脑裂
环境: Primary 节点:node1Secondary 节点:node2 DRBD产生脑裂的原因: (1. 采用HA环境的时候自动切换导致脑裂; (2. 人为操作或配置失误,导 ...
- jq PC做滚动效果经常用到的各类参数【可视区判断】
获取 浏览器显示区域 (可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度: $( ...
- 使用scatter画散点图
刚开始接触Python,照着例子写的代码,百度注释的. from numpy import * import matplotlib import matplotlib.pyplot as plt im ...
- CocoaPods制作
欢迎相同喜欢动效的工程师/UI设计师/产品添加我们 iOS动效特攻队–>QQ群:547897182 iOS动效特攻队–>熊熊:648070256 引言: 折腾了三四天,各种文章翻遍了,遇到 ...
- 【剑指offer】Q25:二叉树中和为某一值的路径
说明:最烦的就是看别人的博客,题解里直接上代码,一行分析都没有.只是这个题... class BTNode(): def __init__(self, val = -1): self.val = va ...
- centos 6.7下安装rabbitmq 3.6.6过程
准备,请确保有root权限或者sudo权限,不然不用继续看下去了. 1.erland的安装 首先测试一下是否已经安装了erlang,命令 rpm -qa | grep erlang 若没有安装,则 y ...
- Android 实现QQ、微信、新浪微博和百度第三方登录
前言: 对于大多数的APP都有第三方登录这个功能,自己也做过几次,最近又有一个新项目用到了第三方登录,所以特意总结了一下关于第三方登录的实现,并拿出来与大家一同分享: 各大开放平台注册账户获取AppK ...
- deep-in-es6(三)
模板字符串:反撇号(`)包起来的内容. eg: var str = `assassin`; console.log(str); 模板占位符:${};可达到数据的渲染,在占位符中可以是表达式,运算符,函 ...
- python3 import Crypto 失败的解决办法 (AES对称加密使用 模块)
# 先导入所需要的包 pip3 install Crypto # 再安装pycrypto pip3 install pycrypto from Crypto.Cipher import AES # 就 ...
- 小米开源文件管理器MiCodeFileExplorer-源码研究(6)-媒体文件MediaFile和文件类型MimeUtils
接着之前的第4篇,本篇的2个类,仍然是工具类.MediaFile,媒体文件,定义了一大堆的常量,真正的有用的方法就几个.isAudioFileType.isVideoFileType之类的. Mime ...