HTML页面中复选框的操作方法页面中复选框的操作方法
复选框在网页中很是常见，无论是电商网站，还是平台，只有有需要选择的地方就会见到复选的身影。接下来，是我之前写过
的两个小demo，都是关于复选框的，希望会给大家带来帮助。
第一个是关于复选框全选反选的操作，当然我在里面还加了一个小功能，就是当选择底下尚品或者其他的东西的复选框全部为
选中状态时则全选按钮也变为选中状态；反之亦然。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td{
border: 1px solid black;
text-align: center;
}
table{
border: 1px solid black;
}
#opp{
border-radius: 50%;
width: 20px;
height: 20px;
border: 1px style #eee;
outline-style: none;
}
</style>
</head>
<body>
<table>
<tr>
<td><input id="all" type="checkbox">全选</td>
<td width="300px">复选框全选示例</td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input id="opp" type="button">反选</td>
<td></td>
</tr>
</table>
<script>
var vll = document.getElementById("all");
var vlist=document.getElementsByClassName("list");
var vopp=document.getElementById("opp");
vll.onclick=function(){
for(var i=0;i<vlist.length;i++){
vlist[i].checked=vll.checked;
}
}
for( var i=0;i<vlist.length;i++){
评论0