摘要:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=1 , initial-scale=1.0">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1
, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全选和取消全选</title>
<style>
table{
border-collapse: collapse;
width:500px;
text-align: center;
}
</style>
</head>
<body>
<table border='1'>
<tr>
<td>
<span>全选</span>
<input onchange="allSelect(this)" type="checkbox">
</td>
<td>序号</td>
<td>产品</td>
<td>单价</td>
<td>数量</td>
</tr>
<tr>
<td><input type="checkbox" class="tag"></td>
<td>1</td>
<td>电脑</td>
<td>3210</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" class="tag"></td>
<td>2</td>
<td>电脑包</td>
<td>300</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" class="tag"></td>
<td>3</td>
<td>文件袋</td>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" class="tag"></td>
<td>4</td>
<td>笔筒</td>
<td>15</td>
<td>10</td>
</tr>
<tr>
<td><input type="checkbox" class="tag"></td>
<td>5</td>
<td>笔记本</td>
<td>3</td>
<td>10</td>
</tr>
</table>
<script>
function allSelect(n){
var inputs=document.getElementsByClassName("tag");
inputs=Array.from(inputs);
inputs.forEach(function(val){
val.checked=n.checked;
});
}
</script>
</body>
</html>
批改老师:韦小宝批改时间:2018-11-02 10:15:07
老师总结:写的很完整!不错!下次记得加上代码的高亮啊!继续加油吧!