<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用JavaScript实现全选与取消</title>
<script>
//选择all复选框，判断每个子复选框的checked值是否与all复选框的值一样
function chooseAll()
{
var flag=document.getElementById("all").checked;
for(var i=1;i<=4;i++)
{
document.getElementById("c"+i).checked=flag;
}
}
function chooseNum(num)
{
var flag=document.getElementById("c"+num).checked;
//书写子复选框是否全部选中，从而确定all复选框的值是否勾选方法
checkAll();
}
function checkAll()
{
var isFlag=true;
for(var i=1;i<=4;i++)
{
var flag=document.getElementById("c"+i).checked;
if(flag==false)
{
isFlag=false;
}
}
if(isFlag)
{
document.getElementById("all").checked=true;
}
else
{
document.getElementById("all").checked=false;
}
}
</script>
<style type="text/css">
td
{
width:150px;
font-size:15px;
text-align:center;
}
input
{
text-align:center;
}
</style>
</head>
<body>
<div align="center">
<form action="" method="post" >
<table border="1px" width="500px"height="50px" align="center">
<thead>
<tr>
<th><input type="checkbox" id="all" onclick="chooseAll()"/></th>
<th>商品名称</th>
<th>商品价格</th>
<th>购买数量</th>
<th>商品总价</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="c1" onclick="chooseNum(1)"/></td>
<td>华为P20</td>
<td>4500</td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" id="c2" onclick="chooseNum(2)"/></td>
<td>iphoneX</td>
<td>8000</td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" id="c3" onclick="chooseNum(3)"/></td>
<td>小米6</td>
<td>2399</td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" id="c4" onclick="chooseNum(4)"/></td>
<td>OPPOR11</td>
<td>1899</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>>
浙公网安备 33010602011771号