全选与取消全选的方法

原创 2018-11-02 10:13:10 680
摘要:<!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
老师总结:写的很完整!不错!下次记得加上代码的高亮啊!继续加油吧!

发布手记

热门词条