用原生JS实现网上点餐功能

HTML:

<table border="2px" rules="all" bordercolor="pink" width="300px" height="20px">
<thead align="center">
<tr>
<th>
<input type="checkbox"  id="theadinp"/>
</th>
<th>菜名</th>
<th>店名</th>
</tr>
</thead>
<tbody align="center" id="tbody">
<tr>
<td>
<input type="checkbox" />
</td>
<td>干煸豆角</td>
<td>金手勺</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>麻辣香锅</td>
<td>金手勺</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>巫山烤鱼</td>
<td>金手勺</td>
</tr>
</tbody>
</table>

JS:

var theadinp = document.getElementById("theadinp");
var tbody = document.getElementById("tbody");
var tbodyinp = tbody.getElementsByTagName("input");
theadinp.onclick = function(){
for(var i = 0;i<tbodyinp.length;i++){
tbodyinp[i].checked = this.checked;
}
}

CSS:

tbody tr:hover{
background-color: gainsboro;
}
thead tr{
background-color: lightblue;
}