文章通过几个示例详细介绍了如何使用JavaScript和DOM操作实现购物车功能，包括点击按钮修改商品数量并实时更新小计，使用选择器API查找和修改元素内容，以及计算购物车总价。同时，讨论了innerHTML和textContent的区别以及如何处理表单元素的value属性。
一. 购物车:
1. 示例: 点按钮，修改数量:
3_shoppingCart1.html
<!DOCTYPE HTML>
<html>
<head>
<title>使用Selector API实现购物车客户端计算</title>
<meta charset="utf-8" />
<style>
table {
width: 600px;
text-align: center;
border-collapse: collapse;
}
td,
th {
border: 1px solid black
}
td[colspan="3"] {
text-align: right;
}
</style>
</head>
<body>
<table id="data">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>iPhone6</td>
<td>¥4488.00</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>¥4488.00</td>
</tr>
<tr>
<td>iPhone6 plus</td>
<td>¥5288.00</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>¥5288.00</td>
</tr>
<tr>
<td>iPad Air 2</td>
<td>¥4288.00</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>¥4288.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total: </td>
<td>¥14064.00</td>
</tr>
</tfoot>
</table>
<script>
//1. 查找触发事件的元素
//本例中: 在table下查找所有button元素
//1.1 先查找id为data的table元素
var table=document.getElementById("data");
//1.2 在table中查找所有button元素
var 按钮们=table.getElementsByTagName("button");
console.log(按钮们);
//2. 绑定事件处理函数
//本例中: 为找到的每个按钮都绑定单击事件处理函数
//所以遍历查找结果中每个DOM元素按钮
for(var 按钮 of 按钮们){
console.dir(按钮);
按钮.onclick=function(){
//功能一: 点按钮，数量变
//3. 获得要修改的元素
//本例中: 要修改的是button的爹td下的第二个孩子span
var span=this.parentElement.children[1];
//4. 修改span的内容:3步:
//4.1 先取出现在span中的旧内容
//坑: 今后，凡是从页面上获得的都是字符串，所以，要算术计算之前最好都转为数字才保险
var n=parseInt(span.innerHTML);
//4.2 根据点的按钮不同，对span的旧内容+1或-1
//如果当前点击的按钮的内容是+，就n+1
if(this.innerHTML=="+"){
n++
}else if(n>1){
//否则如果当前点击的按钮的内容是-，且n>1时，才能-1
n--;
}
//4.3 将计算后的新值放回span的内容中
span.innerHTML=n;
}
}
</script>
</body>
</html>
运行结果:
2. 示例: 数量修改，小计也修改
3_shoppingCart2.html
<!DOCTYPE HTML>
<html>
<head>
<title>使用Selector API实现购物车客户端计算</title>
<meta charset="utf-8" />
<style>
table {
width: 600px;
text-align: center;
border-collapse: collapse;
}
td,
th {
border: 1px solid black
}
td[colspan="3"] {
text-align: right;
}
</style>
</head>
<body>
<table id="data">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>iPhone6</td>
<td>¥4488.00</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>¥4488.00</td>
</tr>
<tr>
<td>iPhone6 plus</td>
<td>¥5288.00</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>¥5288.00</td>
</tr>
<tr>
<td>iPad Air 2</td>
<td>¥4288.00</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>¥4288.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total: </td>
<td>¥14064.00</td>
</tr>
</tfoot>
</table>
<script>
//1. 查找触发事件的元素
//本例中: 在table下查找所有button元素
//1.1 先查找id为data的table元素
var table=document.getElementById("data");
//1.2 在table中查找所有button元素
var 按钮们=table.getElementsByTagName("button");
console.log(按钮们);
//2. 绑定事件处理函数
//本例中: 为找到的每个按钮都绑定单击事件处理函数
//所以遍历查找结果中每个DOM元素按钮
for(var 按钮 of 按钮们){
console.dir(按钮);
按钮.onclick=function(){
//3. 查找要修改的元素
//本例中: 要修改按钮旁边的span
var span=
this.parentElement.children[1];
//按钮 td 所有孩子中第2个
//4. 修改元素:3步
//4.1 取出现在的旧内容
//但是，因为从页面上获得的一切都是字符串！如果要进行算术计算，必须先转换，再计算
var n=parseInt(span.innerHTML);
//4.2 修改后
//本例中:如果当前点击的按钮的内容为+，则n++，否则如果当前点击的按钮的内容为-，且n>1，才能n--。因为购物车中商品数量不能<1
if(this.innerHTML=="+"){
n++;
}else if(n>1){
n--;
}
//4.3 再放回去
span.innerHTML=n;
//功能2:
//3. 查找要修改的元素
//本例中: 查找小计单元格td
//当前按钮的爹td的下一个兄弟td
var tdSub=this.parentElement.nextElementSibling;
//4. 修改元素
//4.1 获得单价: 获取当前按钮的爹td的前一个兄弟td中的内容，去掉开头的人民币符号，转为小数
var price=parseFloat(
this //当前按钮
.parentElement //当前按钮所在td
.previousElementSibling //当前按钮所在td的前一个兄弟td
.innerHTML //的内容
.slice(1) //选取除人民币符号之后的所有剩余内容
);
//4.2 计算小计: 单价*数量n
var sub=price*n;
//4.3 再放回小计td的内容中
tdSub.innerHTML=`¥${sub.toFixed(2)}`;
}
}
</script>
</body>
</html>
运行结果:
二. 查找:
1. 按选择器查找: 今后如果元素藏的很深，非常分散时，查找条件变得很复杂，都可用按选择器查找.
(1). 只查找一个符合要求的元素
a. var 一个元素对象=任意父元素.querySelector("选择器")
按选择器
查询
(2). 查找多个符合要求的元素
b. var 类数组对象=任意父元素.querySelectorAll("选择器")
2. 示例: 计算购物车总价:
day01剩余/3_shoppingCart3.html
<!DOCTYPE HTML>
<html>
<head>
<title>使用Selector API实现购物车客户端计算</title>
<meta charset="utf-8" />
<style>
table {
width: 600px;
text-align: center;
border-collapse: collapse;
}
td,
th {
border: 1px solid black
}
td[colspan="3"] {
text-align: right;
}
/*tbody中每行最后一个td背景变为粉色*/
tbody td:last-child{
background-color:pink;
}
/*tfoot中最后一个td背景变为黄色*/
tfoot td:last-child{
background-color:yellow;
}
</style>
</head>
<body>
<table id="data">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>iPhone6</td>
<td>¥4488.00</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>¥4488.00</td>
</tr>
<tr>
<td>iPhone6 plus</td>
<td>¥5288.00</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>¥5288.00</td>
</tr>
<tr>
<td>iPad Air 2</td>
<td>¥4288.00</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>¥4288.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total: </td>
<td>¥14064.00</td>
</tr>
</tfoot>
</table>
<script>
//1. 查找触发事件的元素
//本例中: 在table下查找所有button元素
//1.1 先查找id为data的table元素
var table=document.getElementById("data");
//1.2 在table中查找所有button元素
var 按钮们=table.getElementsByTagName("button");
console.log(按钮们);
//2. 绑定事件处理函数
//本例中: 为找到的每个按钮都绑定单击事件处理函数
//所以遍历查找结果中每个DOM元素按钮
for(var 按钮 of 按钮们){
console.dir(按钮);
按钮.onclick=function(){
//3. 查找要修改的元素
//本例中: 要修改按钮旁边的span
var span=
this.parentElement.children[1];
//按钮 td 所有孩子中第2个
//4. 修改元素:3步
//4.1 取出现在的旧内容
//但是，因为从页面上获得的一切都是字符串！如果要进行算术计算，必须先转换，再计算
var n=parseInt(span.innerHTML);
//4.2 修改后
//本例中:如果当前点击的按钮的内容为+，则n++，否则如果当前点击的按钮的内容为-，且n>1，才能n--。因为购物车中商品数量不能<1
if(this.innerHTML=="+"){
n++;
}else if(n>1){
n--;
}
//4.3 再放回去
span.innerHTML=n;
/*修改小计*/
//3. 查找要修改的元素
//本例中:查找当前按钮的爹td的下一个兄弟td
var subTd=this.parentElement.nextElementSibling;
//4. 修改元素
//4.1 先获得单价: 当前按钮的爹td的前一个兄弟td的内容，去掉开头¥，转为数字
var price=parseFloat(
this //当前按钮
.parentElement //当前td
.previousElementSibling //前一个td
.innerHTML//内容"¥4488.00"
.slice(1) //"4488.00"
);
//4.2计算小计:单价*数量
var sub=price*n;
//4.3将小计放入小计单元格:
subTd.innerHTML=`¥${sub.toFixed(2)}`;
/*修改总计*/
//3. 查找要修改的元素
//本例中:计算出总计后，要放入tfoot中最后一个td里
var totalTd=table.querySelector("tfoot td:last-child");
//4. 修改元素
//本例中:
//4.1 查找所有行中最后一个td小计单元格
var tds=table.querySelectorAll("tbody td:last-child");
//4.2 遍历找到的每个小计td，将每个td的内容转为整数，累加到一个变量total中
var total=0;
for(var td of tds){
total+=parseFloat(td.innerHTML.slice(1));
}
//4.3 将总计total，保留两位小数，拼上¥，放入总计td的内容中
totalTd.innerHTML=`¥${total.toFixed(2)}`;
}
}
</script>
</body>
</html>
运行结果:
三. 修改: 3种东西
1. 内容: 3种:
(1). 获取或修改元素开始标签到结束标签之间的原始的HTML内容
a. 元素对象.innerHTML
内部 HTML内容
b. 获取元素内容时: innerHTML原样返回HTML代码中的html内容个，不做任何加工
c. 修改元素内容时: innerHTML会先将字符串内容交给浏览器解析，然后将解析后的可以给人看的内容显示在页面上
(2). 获取或修改元素开始标签到结束标签之间的纯文本内容
a. 元素对象.textContent
文本 内容
b. 获取元素内容时: textContent去掉内嵌的标签，并将特殊符号转为正文，然后在返回修改后的内容。
c. 修改元素内容: 不会将字符串内容交给浏览器解析，而是直接保持字符串的原样内容输出
d. 示例: 分别使用innerHTML和textContent获取和修改元素的内容
0_html_text_value.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3 id="msg">来自<a href="#"><<新华社>></a>的消息</h3>
<h3 id="msg2"></h3>
<h3 id="msg3"></h3>
<script>
var h3Msg=document.getElementById("msg");
var h3Msg2=document.getElementById("msg2");
var h3Msg3=document.getElementById("msg3");
//想获取msg的内容
console.log(h3Msg.innerHTML)
console.log(h3Msg.textContent)
//想修改msg2和msg3的内容
var str=`来自<a href="#"><<新华社>></a>的消息`;
h3Msg2.innerHTML=str;
h3Msg3.textContent=str;
</script>
</body>
</html>
(3). 获取或修改表单元素的内容:
a. 问题: 绝大多数表单元素都是input元素，而input元素是单标记，没有结束标签，所以不能使用innerHTML和textContent来获取或修改内容
b. 解决: 今后只要获取或修改表单元素的值，都要用value代替innerHTML和textContent
(4). 示例: 开关门效果：
0_door.html
<!DOCTYPE HTML>
<html>
<head>
<title>读取并修改元素的内容</title>
<meta charset="utf-8" />
<style>
div {
float: left;
width: 110px;
height: 200px;
}
#d1{
background-color:#ccff00;
background-image:url(images/xsj.png);
background-size:160% 80%;
background-position:-30px 30px;
}
#d3 {
background-image:url(images/men.png);
background-size:110% 110%;
background-position:-10px -10px;
position:relative;
}
#d2 {
cursor: pointer;
background-color:#fff;
position:absolute;
width:40px; height:18px;
text-align:center;
top:65px;
font-weight:bold;
color:green;
left:50%; margin-left:-20px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d3">
<div id="d2">无人</div>
</div>
<script>
//DOM 4步
//1. 查找触发事件的元素
//本例中: 点d2可以开关门
var d2=document.getElementById("d2");
//2. 绑定事件处理函数
d2.onclick=function(){
//3. 查找要修改的元素
//本例中: 开关门是通过显示或隐藏d1(洗手间)来实现的
var d1=document.getElementById("d1");
//4. 修改元素
//如果当前d2的内容是"无人"
if(this.innerHTML=="无人"){
//就关门
d1.style.display="none"
//相当于手工:
//<div id="d1" style="display:none">
d2.innerHTML="有人";
d2.style.color="red";
}else{//否则如果当前d2的内容是"有人"
//就开门
d1.style.display=""
d2.innerHTML="无人";
d2.style.color="green";
}
}
</script>
</body>
</html>
2. 属性: 3种属性:
(1). 字符串类型的HTML标准属性:
a. 什么是: HTML标准中规定的，属性值为字符串的属性
b. 比如: class, id, name, value, href, title, ...
c. 如何: 2种方式:
1). 旧核心DOM4个函数:
i. 获取属性值: 元素对象.getAttribute("属性名")
获取 属性
ii. 修改属性值:
元素对象.setAttribute("属性名", "新值")
修改 属性
iii. 判断是否包含某个属性:
元素对象.hasAttribute("属性名")
有 属性(吗?)
iv. 移除属性: 元素.removeAttribute("属性名")
移除 属性
2). 新的简化版HTML DOM:
i. 新的HTML DOM已经将所有HTML标准属性，提前保存在了内存中的元素对象身上。只不过页面上暂时没用到的属性，默认值为""而已.
ii. 今后，只要操作HTML标准属性，就都可用".属性名"方式操作
iii. 如何用.代替以上四种操作：
①获取属性值: 元素对象.属性名
②修改属性值: 元素对象.属性名=属性值
③判断是否包含某个属性:
因为所有标准属性已经在元素对象身上了，只不过默认值为""，所以:
元素.属性名!=="" 说明包含该属性
④移除属性:
错误: delete 元素对象.属性名
正确: 元素对象.属性名=""
iv. 特例: class属性
问题: ES6基础语法中已经将class定义为关键字，有特殊功能，专门用于创建一种类型。所以，DOM标准就不能重复使用"class"这个属性名。
解决: 今后，在DOM中只要用.获取或修改元素的class属性值，都必须换成".className"。
但是，操作.className，就是在操作页面上元素的class属性。
d. 示例: 使用核心DOM和HTML DOM两种方式操作a元素的属性:
1_attribute.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a id="a1" href="http://tmooc.cn" title="前往tmooc">go to tmooc</a>
<script>
var a1=document.getElementById("a1");
//获取a1的href属性
// console.log(a1.getAttribute("href"));
console.log(a1.href);
//修改a1的title属性
// a1.setAttribute("title","Welcome to tmooc");
a1.title="Welcome to tmooc";
//判断是否包含target属性
// console.log(a1.hasAttribute("target"));//false
console.log(a1.target!=="");//false 说明不包含
//为a1添加target属性
// a1.setAttribute("target","_blank")
a1.target="_blank";
//判断是否包含target属性
// console.log(a1.hasAttribute("target"));//true
console.log(a1.target!=="");//true 说明包含
console.log(a1);
console.dir(a1);
</script>
</body>
</html>
运行结果:
e. 示例: 手风琴/伸缩菜单效果
1_menu.html
<!DOCTYPE HTML>
<html>
<head>
<title>1. 实现伸缩二级菜单</title>
<meta charset="utf-8" />
<style>
li {
list-style: none;
}
li span {
padding-left: 20px;
cursor: pointer;
background: url("images/add.png") no-repeat center left;
}
li ul {
display: none;
}
.open {
background: url("images/minus.png") no-repeat center left;
}
.open+ul {
display: block;
}
</style>
</head>
<body>
<ul class="tree">
<li>
<span class="open">考勤管理</span>
<ul>
<li>日常考勤</li>
<li>请假申请</li>
<li>加班/出差</li>
</ul>
</li>
<li>
<span>信息中心</span>
<ul>
<li>通知公告</li>
<li>公司新闻</li>
<li>规章制度</li>
</ul>
</li>
<li>
<span>协同办公</span>
<ul>
<li>公文流转</li>
<li>文件中心</li>
<li>内部邮件</li>
<li>即时通信</li>
<li>短信提醒</li>
</ul>
</li>
</ul>
<script>
//DOM 4步
//1. 查找触发事件的元素
//本例中: 点击ul下li下所有span都能触发变化
var spans=document.querySelectorAll(
"ul>li>span"
);
//2. 绑定事件处理函数
//本例中: 因为要给每个span绑定单击事件，所以要遍历找到的每个span
for(var span of spans){
span.onclick=function(){
//3. 查找要修改的元素
//4. 修改元素
//如果当前点击的span的class是open，说明当前span是打开的，则只关闭自己即可！不用再遍历别人了
if(this.className=="open"){
this.className="";
return;//停止执行当前函数，并退出当前函数。
}
//先找到ul下所有span
var spans=
document.querySelectorAll(
"ul>li>span"
);
//遍历清除每个span上的class open，让所有的菜单暂时都隐藏
for(var span of spans){
span.className="";
}
//然后，再只给当前点击的一个span添加class open，只让当前一个菜单显示
this.className="open";
}
}
</script>
</body>
</html>
运行结果：
(2). bool类型的HTML标准属性:
a. 什么是: HTML标准中规定的，不需要写属性值，只靠属性名就可发挥作用的属性。
b. 比如:
1). checked: 用于标记一个checkbox是否被选中
2). disabled: 用于标记一个表单元素是否被禁用
... ...
c. 如何: 2种:
1). 即可用核心DOM 4个函数
i. 添加bool类型的HTML标准属性:
标准写法: 元素.setAttribute(“属性名”,”属性名”)
比如:
input.setAttribute(“disabled”,”disabled”);//禁用文本框
结果: <input disabled=“disabled”>
简写:
只要添加了disabled属性，就起作用，不给值也行
元素.setAttribute(“属性名”,””)
比如: input.setAttribute(“disabled”,””);//禁用文本框
结果: <input disabled=“”>
ii.移除bool类型HTML标准属性
元素.removeAttribute(“属性名”)
比如:
input.removeAttribute(“disabled”) //启用文本框
结果: <input disabled />
iii. 判断元素当前处于何种状态
元素.hasAttribute(“属性名”)
结果: 有哪个属性，就说明处于哪种状态
没有哪个属性，说明没有处于哪种状态
比如: input.hasAttribute(“disabled”)//判断文本框是启用，还是禁用
2). 又可用新HTML DOM来操作
元素.属性名
且属性值必须是bool类型的true或false。
比如:
判断元素现在处于何种状态: 元素.属性名
修改状态: 元素.属性名=bool值
d. 示例: 点同意，启用按钮，不同意，禁用按钮
2_checked.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input id="chb" type="checkbox">同意</br>
<button id="btn" disabled>注册</button>
<script>
//DOM4步
//1.查找触发事件的元素：
//本例中: 点击CheckBox影响按钮的启用禁用状态
var chb=document.getElementById("chb");
//2. 绑定事件处理函数
//当表单元素的内容或状态改变时自动触发
//本例中，当CheckBox的选中状态被改变时，自动执行
chb.onchange=function(){
//3. 查找触发事件的元素
//本例中，选中checkbox影响button的启用和禁用状态
var btn=document.getElementById("btn");
//4. 修改元素
//本例中:
//如果当前checkbox是选中的
// if(this.checked==true){
// //则启用button
// btn.disabled=false;//不 禁用 = 启用
// }else{//否则如果当前checkbox是未选中的，
// //则禁用button
// btn.disabled=true;
// }
//基础好的同学:
btn.disabled=!this.checked;
//this.checked==true->btn.disabled=false;
//this.checked==false->btn.disabled=true;
//总结规律:让btn.disabled值与this.checked的值相反即可！
}
</script>
</body>
</html>
运行结果：
e. 示例: 全选和取消全选
2_selectAll.html
1). 补: css中已经提供了专门的选择器，用于匹配处于不同状态的元素——状态伪类，比如
i. 选择选中的元素: :checked
选择未选中的元素: :not(:checked)
未 选中的
ii. 选择禁用的元素: :disabled
... ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>全选和取消全选</title>
<style>
/*首先必须是input
其次必须是选中的*/
input:checked{
box-shadow:0 0 5px red;
}
/*首先必须是input
其次必须是未选中的*/
input:not(:checked){
box-shadow:0 0 5px green;
}
</style>
</head>
<body>
<h2>管理员列表</h2>
<table border="1px" width="500px">
<thead>
<tr>
<th><input type="checkbox"/>全选</th>
<th>管理员ID</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>1</td>
<td>Tester</td>
<td>修改 删除</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>2</td>
<td>Manager</td>
<td>修改 删除</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>3</td>
<td>Analyst</td>
<td>修改 删除</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>4</td>
<td>Admin</td>
<td>修改 删除</td>
</tr>
</tbody>
</table>
<script>
/*点全选，修改tbody中所有checkbox*/
//DOM 4步
//1. 查找触发事件的元素
//本例中: 点击thead中第一个th中的input，会影响tbody中所有行第一td中的input
var chbAll=document.querySelector(
"thead th:first-child>input"
);
//2. 绑定事件处理函数
//当全选checkbox的选中状态发生改变时，自动执行函数
chbAll.onchange=function(){
//3. 查找要修改的元素
//本例中: 点上方的全选，影响tbody中每行第一个td中的input
var chbs=document.querySelectorAll(
"tbody td:first-child>input"
);
//4. 修改元素
//点上方的全选，tbody中的所有checkbox都要修改，所以应该遍历找到的每个checkbox
for(var chb of chbs){
//如果表头中的chbAll选中，则每个chb都要选中
// if(chbAll.checked==true){
// chb.checked=true;
// }else{//否则如果表头中的chbAll未选中，则每个chb都不能选中
// chb.checked=false;
// }
//规律: tbody中每个checkbox的选中状态应该和表头中chbAll的选中状态始终保持一致！
chb.checked=chbAll.checked;
}
}
/*点tbody中每个checkbox，也会影响表头中的全选*/
//DOM 4步
//1. 查找触发事件的元素
//本例中: 查找tbody中每个checkbox
var chbs=document.querySelectorAll(
"tbody td:first-child>input"
);
//2. 绑定事件处理函数
//因为tbody中每个checkbox都能点击，所以遍历每个checkbox
for(var chb of chbs){
//每遍历一个chb，就绑定单击事件
chb.onclick=function(){
//3. 查找要修改的元素
//本例中: 要修改表头中的全选checkbox
var chbAll=document.querySelector(
"thead th:first-child>input"
);
//4. 修改元素
//尝试查找tbody下一个未选中的checkbox
var unchecked=document.querySelector(
"tbody td:first-child>input:not(:checked)"
);
//如果找到未选中的
if(unchecked!=null){
//则全选chbAll，不全选
chbAll.checked=false;
}else{//否则如果没找到未选中的，说明都选中了
//全选chbAll，选中！
chbAll.checked=true;
}
}
}
</script>
</body>
</html>
运行结果：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
