今天学习了使用js实现全选功能,点击全选的复选框后会将下面所有的复选框变为被选择状态。
代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js全选功能</title>
<style>
table{
border: 1px solid black;
}
td,th{
width: 100px;
height: 50px;
text-align: center;
}
td{
background:#ddd;
}
th{
background:lightgray;
}
</style>
</head>
<body>
<table>
<tr>
<th><input type="checkbox" id="checkall">全选</th>
<th>商品名</th>
<th>价格</th>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>html</td>
<td>9.9</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>css</td>
<td>19.9</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>js</td>
<td>99.9</td>
</tr>
</table>
<script>
let checkall=document.getElementById("checkall");
let check=document.querySelectorAll('.check');
checkall.addEventListener('click',function(){
let checkvalue=checkall.checked;
check.forEach(function(ele){
ele.checked=checkvalue
})
})
</script>
</body>
</html>
显示效果为: