DOM
DOM，全称是Document Object Model文档对象模型，是w3c推荐的处理html的标准编程接口。
js是通过一系列DOM接口来对html文档进行操作的，可以改变网页的内容，结构和样式
一套操作页面元素的属性和方法
dom是一个以树状结构存在的内容，dom的顶级是Document表示当前文档，因为在pc端的文档是插入浏览器里运行的，所以在pc端，document上面还有一个window
操作dom，从document，各种标签，文本，属性，样式的操作
window下有一个document对不对？ 答案对
看dom树图片
-
文档：一个html网页就是一份文档，在DOM中使用document表示
-
元素：html文档中的所有标签都是元素，DOM中使用element表示
-
节点：网页中的所有内容都是节点（标签，属性，文本，注释等），在DOM中节点使用node表示
节点是构成html文档的最基本的单元，网页中的每一个部分都可以称为是一个节点，
比如：html标签（元素），属性，文本，注释，整个文档都是一个节点
根据节点的类型不同，对节点进行了分类：比如标签是元素节点，属性是属性节点，文本是文本节点（空格换行也是文本节点），文档是文档节点
js中常用的节点分类
-
文档节点：一个html网页就是一个文档，在DOM中使用document表示
document是页面中最大的节点，只能有一个，是承载所有节点的容器，不属于元素，根节点
-
元素节点：html文档中的所有标签都是元素节点
-
html是一个页面中最大的元素节点，承载所有其他节点，是根元素节点
-
其他元素节点：
head body div p ul table...都是元素节点，只是不同的标签在页面中表现形式不一样
-
-
属性节点：元素的属性
属性节点不作为独立节点出现，必须依赖于元素，没有元素，属性节点就是文本
-
文本节点：html标签中的文本内容
每一段文本内容都是一个文本节点，包含空格和换行
一般作为元素节点的子节点存在，用来表示该元素节点在页面上显示的内容
-
注释节点：页面中书写的注释内容
作为独立节点出现，作为说明文本使用
-
-
对象：DOM把文档，元素，节点都转换为一个对象
-
模型：使用模型来表示对象之间的关系，这样可以方便我来获取对象（dom树）
-
我们获取过来的DOM元素是一个对象，所以称为文档对象模型
节点
节点属性
作用 ：用来描述这个节点的信息，相同类型的不同节点，有相同的属性名，但是值不一样
-
节点的类型不同，属性和方法也都不尽相同，一般节点至少拥有nodeType（节点类型），nodeName（节点名），nodeValue（节点值）这三个基本属性
-
文档节点
-
节点名（nodeName）为#document
-
节点类型（nodeType）为9
-
节点值（nodeValue）为null
-
-
元素节点
-
节点名（nodeName）为大写标签名（全大写）
-
节点类型（nodeType）为1
-
节点值（nodeValue）为null
-
-
属性节点
-
节点名（nodeName）为属性名
-
节点类型（nodeType）为2
-
节点值（nodeValue）为属性值
-
-
文本节点
-
节点名（nodeName）：所有文本节点的名称全部为： #text
-
节点类型（nodeType）为3
-
节点值（nodeValue）为文本内容（包括文字，空格和换行）
-
-
注释节点
-
节点名：所有注释节点的名称都为 #comment
-
节点类型（nodeType）为8
-
节点值：注释内容 （包含换行和空格）
-
在实际开发中，节点操作主要操作的是元素节点
-
节点操作：
不光操作元素还要操作 注释节点，文本节点，属性节点
获取节点（获取元素节点，文本节点，属性节点等...）
创建节点：通过js的语法来创建一个标签，文本，注释等
插入节点：把创建的节点插入到另一个节点，出现父子结构
删除节点：把一个已经存在的节点删除
替换节点：使用创建的节点去替换一个已经存在的节点
克隆节点：把一个已经存在的节点复制一份一模一样的
事件
-
事件就是用户和文档或浏览器窗口中发生的交互行为，比如点击按钮，鼠标移动，按下键盘上的某个键，关闭窗口，简单的理解：触发响应机制
-
html和js之间的交互是通过事件实现的,事件是可以被js侦测到的行为
事件是由三部分组成的（事件三要素） ：
事件源，事件类型，事件处理函数（程序）
-
事件源： 在谁身上绑定事件 比如：按钮
-
事件类型，如何触发，什么事件，比如：鼠标点击事件（click）鼠标经过事件
on是绑定事件的方式 onclick
-
事件处理函数（程序）：当行为发生的时候，执行哪一个函数。通过一个函数赋值的方式
-
执行事件是的步骤：1:获取事件源 2:注册（绑定）事件 3:添加事件处理程序（采用函数赋值的形式）
事件注册的方式
事件注册/事件绑定：即给元素添加事件
事件注册的两种方式：传统方式 和 事件监听注册方式
-
传统注册事件的方式：利用on开头的事件 此方法没有兼容性问题
-
特点：
注册事件的唯一性，同一个元素的同一个事件只能设置一个事件处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
因为传统方式的注册事件实际是赋值的行为
-
采用传统注册事件的方式注册事件时的绑定方式
-
1我们可以开始标签中通过事件对应的事件属性设置一些js代码来绑定事件，这样当事件被触发时这些代码就会执行
-
<button type="button" id="btn" onclick="alert('今天天气很不错');">普通按钮</button>
onclik是鼠标点击时元素时触发
这种通过在标签上设置事件属性来执行代码的写法不符合结构，表现，分为相分离的原则，结构和行为耦合，不方便维护，不推荐使用
- 2:在js中获取对象，通过对对象的指定属性(onclick是元素的一个属性)绑定回调函数的形式来响应事件，这样当事件触发时其对应的函数将会被调用
格式：事件源.事件类型=事件处理程序
var btn=document.getElementById('id属性的属性值'); //获取按钮对象 btn.onclick=function(){ //为按钮对象的单击事件绑定的函数，称为单击响应函数 alert('今天下雨了') }
--
-
浏览器在加载一个html文件时，是按照自上向下的顺序加载的，读取到一行就执行一行，如果将script标签写在页面的上面（head内，body前）在代码执行时页面还没有加载，DOM对象也还没有加载，获取DOM对象时就会获取不到，解决这个问题的方法，这种方法会先加载js再加载html元素，会造成元素渲染的延迟
-
script标签写在前头时，给window对象绑定onload事件，onload事件会在整个页面加载完成之后再触发，该事件对应的响应函数将会在页面加载完成后执行
window.onload=function(){ 页面要执行的js代码 }
-
将script标签写在body结束标签的前面，页面元素的后面，这样会在页面元素加载完后再加载script
-
常见的事件
click 鼠标点击事件
focus 获取焦点事件
blur 失去焦点事件
。。。。。
注意：传统注册事件的方式：利用on开头的事件，特点：注册事件的唯一性，同一个元素的同一个事件只能设置一个事件处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
获取页面中的元素
浏览器为我们提供了文档节点对象document，这个对象是Window对象的属性可以在页面中直接使用，文档节点代表的是整个网页 console.log(document)
获取元素节点要通过document对象调用
通过js获取页面中的元素分为两类标签
-
获取特殊元素（body，html，head）
获取html，返回html元素对象 document.documentElement
head : document.head
获取body ,返回body元素对象 document.body
- 常规元素 - 元素的id名，可以直接当做一个变量来使用，这个变量就代表着这个元素 <div id="sy">6666</div> ---js console.log(sy);//返回的就是这个div元素
- 通过id属性获取一个元素节点对象 •```var element=document.getElementById('id属性的属性值')``` ?? 不能在元素范围内使用name属性获取 参数id是大小写敏感的字符串 返回值：返回一个匹配到Id的DOM element对象即元素对象，若在当前document中没有找到，则返回null
console.log(typeOf element); //查看返回值类型 console.dir(element) //consoel.dir方法打印我们返回的元素对象，可以更好的查看元素对象里的属性和方法
- 通过标签名获取一组元素节点对象 - document.getElementsByTagName('标签名') 在document的范围下查找匹配条件的元素 - 父元素A.getElementsByTagName('标签名')； 在元素A的范围下查找匹配条件的子元素 父元素必须指明是哪一个元素对象，获取到的元素不包含父元素自己
var divBox=document.getElementsByTagName('div'); var divA=divBox[0].getElementsByTagName('a'); console.log(divA) ```
返回值：是一个伪数组，数组的常用方法使用不了
将所有查询到元素对象都会封装到数组中返回,即使只查询一个符合条件的元素对象也会封装到数组中返回，如果在页面中没有匹配到的元素，返回的是空的伪数组
- 因为得到的是一个对象集合，所以在操作里面的元素时需要遍历 使用for循环遍历数组，使用索引获取元素
```
var aBob=document.getElementsByTagName('a');
for(var i=0;i<=b.length;i++){
console.log(aBox[i])
}
```
- 得到的元素对象是动态的，即元素变化，返回值也会变化
-
通过name属性获取一组元素节点对象，name属性大多是设置在表单元素上的，但其实所有的元素都可以设置name属性
格式： document.getElementsByName('name属性的属性值') ?? 不能在元素范围内使用name属性获取
返回值：是一个伪数组，数组的常用方法使用不了
将所有查询到元素对象都会封装到数组中返回,即使只查询一个符合条件的元素对象也会封装到数组中返回，如果在页面中没有匹配到的元素，返回的是空的伪数组
表单元素，通过name属性获取一组元素节点对象，返回一个数组
-
通过h5新增的方法获取（有兼容性问题，ie9以上才支持）
-
根据类名获取某些元素集合
document.getElementsByClassName('类名')
元素.getElementByClassName('类名')
返回值：是一个伪数组，数组的常用方法使用不了
将所有查询到元素对象都会封装到数组中返回,即使只查询一个符合条件的元素对象也会封装到数组中返回，如果在页面中没有匹配到的元素，返回的是空的伪数组
var bubu=document.getElementsByClassName('bubu')[0].getElementsByClassName('cell'); console.log(bubu); //获取原属范围内的class类名为cell的元素 -
根据选择器获取元素，选择器需要加符号 .className #id值
-
格式：ducument(或元素).querySelector('选择器')
元素.querySelector('选择器')
能css中写的选择器在这里都可以使用
-
返回值：返回指定选择器的第一个元素对象，没有选择器匹配到的元素则返回null
document.querySelector('.box') document.querySelector('#box') document.querySelector('div')<div id="dBox" class="bubu" name='66'> <a href="" class="cell" id="fan" name="66">33 <span>yy</span> </a> <a href="" id="sun" name='77'>33</a> </div> var a=document.querySelector('#dBox > #fan.cell') var b=document.querySelector('#fan ~ #sun') var c=a.querySelector('span') var d=document.querySelector('#dBox > a:nth-child(1)') console.log(a) console.log(b); console.log(c); console.log(d);-
查找与指定选择器匹配的所有元素
-
返回值：是一个伪数组，数组的常用方法使用不了
将所有查询到元素对象都会封装到数组中返回,即使只查询一个符合条件的元素对象也会封装到数组中返回，如果在页面中没有匹配到的元素，返回的是空的伪数组
-
使用querySelectorAll方法获取的元素合集可以使用foreach，不是数组的foreach而是人家自带的，使用方式时一样的
-
document.querySelectorAll('.box') document.querySelectorAll('#box') document.querySelectorAll('div')
-
-
关于DOM操作，我们主要针对于元素的操作，主要有创建 增删改查
操作元素
-
元素的属性
-
原生属性
id clss src href type name border（table标签）style(给元素设置行内样式）source
-
自定义属性
index abc aaa
自定义属性不是标签原生自带的属性，是我们自己定义的属性，是为了将数据保存在页面中而不需要将数据保存在数据库中，方便直接使用数据
-
H5自定义属性
date-XXXX 以data-开头的属性
h5规定自定义属性以data-开头作为属性名并且赋值（其实也可以不以data-开头，但是这样不容易区分是内置属性还是自定义属性
-
-
改变网页标题 document.title='new title'
我们可以通过DOM（属性）操作元素来改变元素里面的内容，元素的属性等
操作元素的原生属性
格式：
读：元素.属性名 获取元素的该属性值
写：元素.属性名=值 设置
只能获取标签自带的内置属性不能获取自定义属性
class除外，操作类名使用 元素.className
-
操作常见元素的属性
如果需要读写元素节点的属性，直接使用 元素.属性名 src href id alt title等
var boj=document.getElementById('id属性的属性值');
console.log（obj.id）
console.log（obj.name）
console.log（obj.value）
var img=document.getElementByTagName('img');
img.src='.././a.jpg'
但是class属性不能采用这种方式，读写class属性时需要使用 元素.className
操做表单元素的属性
利用DOM可以操作如下表单元素的属性：type value checked selected disabled等
var input=document.getElementByTagName('input');
input.value='777'
//表单里的值通过value属性来读写
input.type='password'
var button=document.getElementByTagName('button');
button.onclick=function(){
//this是事件函数的调用者
//按钮禁用
this.disable=true;
}
----发送按钮倒计时
<input type="text"><button>发送</button>
自定义属性操作
不能使用点语法操作自定义属性
<div data-index='1'></div>
或者使用js设置自定义属性
element.setAttribute('data-index',2)
-
获取（写入）属性
-
获取属性
element.getAttribute('属性名')
//不论设置元素属性时设置的是什么类型的数据，获取到的都是字符串
-
设置属性
element.setAttribute('属性名','属性值')；
-
删除属性
element.removeAttribute('属性名') 标签的原生属性也可以删除，比如a标签的href属性
-
这种方式主要用来操作自定义属性，H5自定义属性，但也可以操作内置属性
但推荐内置属性还是使用element.属性名的方式来操作，自定义属性推荐使用setAttribute
element.setAttribute('data-index','2');
element.setAttribute('class','abc'); //注意以这种方式设置class属性，写的是class而不是className
d.href=10;
console.log(typeof d.getAttribute('href')); //检测获取到的数据类型 string
//如果设置元素属性时设置的是什么类型的数据，获取到的都是字符串
H5自定义属性
dataset方法有兼容性问题，只有ie11才开始支持，所以不推荐使用，也可以不讲，可以使用上一套方法操作
每一个元素身上都有一个dataset属性，它是一个对象，里面包含了设置在元素上的所有H5自定义属性
key是除了data-以外的内容：vlue是这个属性的属性值
操作H5自定义属性，直接在dataset里面进行操作即可（使用的是操作对象属性方法）
格式：标签上写data-index='010'
读 element.dataset.index Element.dataset['index']
写 Element.dataset['a] ="011" 原对象里有是修改属性的值，没有是向对象里增加属性，映射到标签上 是 data-a="011"
删除属性 delete element.datasert.index 删除dataset对象里的index成员
这种方式设置的自定义属性里面有多个-链接的单词，我们获取时采用驼峰命名法
如：element.dataset.myIndex element.dataset['myIndex']
等同于
element.setAttribute('data-index')
操作元素的类名
作用：修改元素的class属性，来达到修改元素样式的目的，使用于样式较多或者功能复杂的情况
使用步骤：需要在css样式表中写入class类名所对应的样式，再通过该方式绑定在元素上
class是个保留字，所以使用className来操作元素的类名属性
-
按照原生属性操作
设置类名 元素.className="box"
修改类名 元素.className="新值1 新值2"
注意：clssName会直接更改元素的类名，会覆盖原先的类名
删除类名 获取原类名，执行操作字符串的方法， 截取字符串等
或者重新写一遍
-
H5标准提供的API
元素身上都有一个classList属性 ,里面包含了该元素的所有的类名
这个classList提供了一系列的方法来操作
-
add()
元素.classList.add('你要添加的类名')
-
remove()
元素.classList.remove('你要移除的类名')
-
toggle() toggle 开关
元素.classList.toggle('你要切换到的类名')
当元素有这个类名时，就删除，当元素没有这个类名时就添加
-----点击显示下来框，通过给元素添加删除属性名 .top-box{ width: 100%; height: 50px; position: absolute; top:0; left:0; background-color: aquamarine; transition:all 1s; } .show{ top:-50px; } .btn{ margin-top: 150px; } -------- <div class="top-box"> 下拉框 </div> <div class="btn">按钮</div> ------- var topBox=document.querySelector('.top-box'); var btn=document.querySelector('.btn'); btn.onclick=function(){ topBox.classList.toggle('show')；// 给元素动态添加类名,有就删除，没有就添加 } -
案例：密码输入框，掩文和明文状态的切换（input标签的type属性为text或者password之间切换）
关闭广告栏 （dispaly：none）
下拉菜单在鼠标滑过时才显示
页面开关灯
排他按钮，点击一个按钮前先清除其他所有按钮的选中状态再设置点击按钮的样式
操作元素样式
我们可以通过js来操作元素的样式，来修改元素的大小，颜色，位置等
样式分为两大类：行内样式 非行内样式
-
行内样式
-
操作元素原生的样式属性
-
获取格式：元素.style 操作元素的行内样式（可读写）
获取到的内容是一个对象，里面包含元素所有的可设置样式,我们想要获取哪个样式就使用操作对象的方式直接获取就可以了,但是只能获取到行内，如果我们的样式是写在css样式表中的，样式可以起作用，但是通过元素.style的方式获取不到css样式表设置的样式
设置：元素.style.指定样式=值
实际是操作的元素的行内样式，行内样式权重（1000）比较高
使用情况，样式比较少或者功能简单的情况下使用
js里的样式采用驼峰命名的方式
element.style.fontSize='16px';
//获取设置元素原生属性style里的样式
element.style.backgroundColor='red';
-
非行内样式
-
获取非行内样式
-
window.getComputedStyle(要获取样式的元素) 这是window对象里的一个方法
-
返回值：一个对象，里面包含所有可设置的样式，每一个样式都有值，没有设置的样式采用默认值
-
获取指定样式：需要获取哪个样式，直降使用访问对象的方式在返回的样式对象里访问即可
只能获取不能设置或修改样式
-
兼容性：标准浏览器适用
-
var style=window.getComputedStyle(changeBox); //获取id为changeBox的元素的非行内样式 得到的是一个对象里面是所有可以设置的样式 console.log(style.width); //使用点运算符获取对象里的样式使，如果样式中带有中划线-，我们在js中要使用驼峰的形式书写样式，因为在js中-表示的是减法运算符，会执行减法的操作 // console.log(style.background-color);//报错 console.log(style.backgroundColor);//得到的结果会给我们转换为rbg值 console.log(style['background-color']);//使用方括号运算符获取css样式对象里的样式
-
元素.currentStyle 属性
-
兼容性：IE低版本适用
-
返回值：返回值是一个对象，里面包含元素所有可设置的样式，每一个样式都有值，没有设置的采用默认值
-
获取指定样式：需要获取哪个样式，直降使用访问对象的方式在返回的样式对象里访问即可
只能获取不能设置或修改样式
-
-
注意： 使用点运算符获取对象里的样式使，如果样式中带有中划线-，我们在js中要使用驼峰的形式书写样式，因为在js中-表示的是减法运算符，会执行减法的操作
使用方括号运算符获取css样式对象里的样式，在字符串中可以写中划线-
这两种获取元素非行内样式的方式有兼容性问题，但是不能使用短路表达式来处理兼容性问题，因为他们是报错；
-
什么情况下使用短路表达式
使用短路表达式兼容前提是，代码执行不能报错即方法或者属性执行没有问题，只是拿不到值的时候可以使用短路表达式
//----------封装一个函数获取元素的样式（处理兼容性问题）
/*
@param {ELEMENT} element - 要获取样式的元素
@param {STRING} style - 要获取的样式字符串
@return {STRING} 获取到的元素样式的值
*/
//-----处理获取元素样式的兼容性问题的函数
function getStyle(element,style){
//判断当前浏览器的window对象里有没有getComputedStyle属性，有则返回true，没有则返回false
//在低版本的ie浏览器中的window对象里没有getComputedStyle属性
if('getComputedStyle' in window){
//有 则是标准浏览器
return window.getComputedStyle(element)[style]
}else{
//IE 低版本
return element.currentStyle[style]
}
}
getStyle(div,'width')；//调用函数获取元素的width样式
@param {参数类型} 参数名 - 对参数的描述信息
@return {函数返回值的类型} 函数返回值的描述
作用：对函数的参数，返回值进行解释
-
设置元素样式
设置元素样式只有一种方式，即我们只能设置元素的行内样式，因为非行内样式css样式表是属于在html的外在文件，而我们js不能操作电脑上的文件
而非要修改非行内样式，只能修改html文件里的style标签的内容或者css文件，不能使用js操作
（我们js实际是可以通过操作内嵌样式表的style标签通过innerText的方式修改样式，但是一般没人这样做）
所以我们修改设置元素的样式只能修改行内样式
格式：元素.style.样式名='样式值'
操作元素内容
三种：innerHTML innerText value
-
innerHTML属性，通过这个属性可以获取到元素内部的html代码，即双标签的标签体，对于单标签而言这个属性没有作用
可读写的属性，可以获取元素里的内容也可写入内容
推荐使用
格式：元素.innnerHTML 可读写的属性
获取元素的超文本内容，获取标签内的所有内容：文本，html标签，保留空格和换行
返回值：以字符串的形式返回
写入时：当写入的字符串中包含htnl结构的时候，会自动解析
var boj=document.getElementById('id属性的属性值'); console.log(obj.innnerHTML)； //获取 obj.innerHTML='<em>我是</em>新的内容' -
innerText属性
作用：操作元素的文本内容 可读写的属性
读：
element.innerText获取元素内的所有文本内容（包含后代元素内的文本，但不包含html标签，并去除空格和换行）
写：
element.innerText='hello完全覆盖式的写入，当写入内容的字符串中出现html的时候，不会自动解析，按原样输出
-
元素的原生value属性
读写属性 元素.value 元素.value='你要设置的值'
案例：
-------选项卡切换，互斥选择
<div class="change-box">
<span class="left-btn">左侧</span> <span class="right-btn">右侧</span> <span class="right-btn">右侧</span> <span class="right-btn">右侧</span>
<div class="change-page">11111</div>
<div class="change-page">2222</div>
<div class="change-page">3333</div>
<div class="change-page">44444</div>
</div>
-------------推荐使用
var allSpan=document.querySelectorAll('.change-box span');
var allpage=document.querySelectorAll('.change-page');
//页面一进来设置第一选项和卡片显示
allSpan[0].className='bg-color';
allpage[0].style.display='block';
allSpan.forEach(function(item,index){
//给每一个元素设置一个自定义属性，这样我们可以在点击之后知道点击的是哪个元素
item.setAttribute('data-index',index);
//给数组中的每一个元素给绑定点击事件
item.onclick=function(){
//给所有元素清除背景颜色
allSpan.forEach(function(item){
item.className=''
})
//给点击的元素增加背景颜色
item.className='bg-color'
//在点击元素的时候获取元素的data-index属性就可以知道点击的是哪一个元素了
console.log(
'点击的元素索引',item.getAttribute('data-index')
)
//将所有的页面隐藏
allpage.forEach(function(item){
item.style.display='none';
})
//将点击了对应索引的页面显示
allpage[item.getAttribute('data-index')].style.display='block'
}
})
--------不推荐
var leftBox=document.querySelector('.left-btn')
var rightBox=document.querySelector('.right-btn')
leftBox.onclick=function(){
rightBox.classList.remove('bg-color')
leftBox.classList.add('bg-color')
}
rightBox.onclick=function(){
leftBox.classList.remove('bg-color')
rightBox.classList.add('bg-color')
}
-----------表单全选
<div class="form">
<div class="top">
<label for="all">全选</label>
<input id="all" type="checkbox"><br>
<hr>
</div>
<div class="cell-input">
<label for="red">红色</label>
<input id="red" type="checkbox"> <br>
<label for="green">绿色</label>
<input id="green" type="checkbox"><br>
<label for="green">绿色</label>
<input id="green" type="checkbox"><br>
<label for="green">绿色</label>
<input id="green" type="checkbox"><br>
<label for="green">绿色</label>
<input id="green" type="checkbox">
</div>
</div>
-----------------------------
var allBtn=document.querySelector('#all');// 全选按钮
var cellBtn=document.querySelectorAll('.cell-input input[type="checkbox"]');// 获取全部的选择
//给全选按钮绑定事件
allBtn.onclick=function(){
//当点击按钮的时候遍历所有选项，给所有选项设置选中属性
cellBtn.forEach(function(item){
//遍历的每一个选项的选中状态与全选按钮的状态一样
item.checked=allBtn.checked
})
}
//给每一个选则绑定点击事件，每次选择后检测一下是不是所有的选择都是选中状态，如是全部选中就给全选按钮设置选中状态
cellBtn.forEach(function(item){
//遍历的每一个选项,给每一个选项设置点击事件
item.onclick=function(){
var isAllChecked=true; //使用一个变量记录是否都选中，假设全都选中
//点击每一个选项，就循环遍历查看一下每一个选项的选中状态
cellBtn.forEach(function(item){
//如果有一个选项的没有选中，就设置isAllChecked为false
if(!item.checked) isAllChecked=false;
})
//循环遍历完之后就可以知道，是不是所有的选项都选中了
//将最终的结果给全选按钮赋值
allBtn.checked=isAllChecked;
}
})
共有 0 条评论