第一列多选框选中为三个商品全选，最后一列反选按钮使三个商品状态翻转
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
height: 500px;
width: 500px;
}
td{
border: solid 3px black;
}
</style>
</head>
<body>
<table>
<tr>
<td><input type="checkbox" class="all"></td>//全选
<td><input type="checkbox" class="item"></td>//商品
<td><input type="checkbox" class="item"></td>//商品
<td><input type="checkbox" class="item"></td>//商品
<td rowspan="3"><button>反选</button></td>
</tr>
<tr>
<td>商品</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>价格</td>
<td>1999</td>
<td>2999</td>
<td>3099</td>
</tr>
</table>
<script>
var alltn=document.querySelector('.all');//通过选择器获取事件源
var items=document.querySelectorAll('.item');//商品，获取得到数组
var rb=document.querySelector('button');//
var statealltn=alltn.checked;
//函数，用于获取三个商品状态，只要有一个没有被选中，全选按钮就不是选中状态，直接return返回
function fn(){
for(var i=0;i<items.length;i++){
if(items[i].checked==false)
{
alltn.checked=false;
return
}
}
//for循环结束，所有商品都为选中时执行，全选按钮状态为选中
alltn.checked=true;
}
//全选事件（鼠标单击），全选按钮状态放到其余商品按钮中
alltn.οnclick=function(){
for(var i=0;i<items.length;i++){
items[i].checked=alltn.checked;
}
}
for(var i=0;i<items.length;i++){
//商品事件，通过for循环遍历，每个商品状态改变时，实行函数（根据商品状态对全选状态做出改变）
items[i].οnclick=function(){
fn()
}
}
//反选事件，for循环遍历，对每一个商品选项状态都做出反转
rb.οnclick=function(){
for(var i=0;i<items.length;i++){
items[i].checked=!items[i].checked;
fn();
}
}
</script>
</body>
</html>
我是菜比
