Html代码:
<table id="purchase-info" class="table table-bordered table-hover table-striped" cellspacing="0" width="100%" align="center"> <caption>采购清单</caption> <thead> <tr> <td><input class="allChoose" type="checkbox" onclick="selectAll()"></td> <th>物品编号</th> <th>物品名称</th> <th>物品分类</th> <th>规格型号</th> <th>供应商</th> <th>采购人员</th> <th>采购数量</th> <th>备注</th> <th>入库操作</th> </tr> </thead> <tbody id="purchase-item"> <tr> <td><input class="choose" type="checkbox"/></td> <td>001</td> <td>真彩水性笔</td> <td>文具</td> <th>盒(12支)</th> <th>上海真彩文具店</th> <th>小王</th> <th>50</th> <th>无备注</th> <td><button id="inStorage">入库</button></td> </tr> <tr> <td><input class="choose" type="checkbox"/></td> <td>001</td> <td>真彩水性笔</td> <td>文具</td> <th>盒(12支)</th> <th>上海真彩文具店</th> <th>小王</th> <th>50</th> <th>无备注</th> <td><button id="inStorage">入库</button></td> </tr> </tbody> </table>
JavaScript 代码:
//全选功能函数 function selectAll(){ var allChoose=document.getElementsByClassName("allChoose")[0]; var list=document.getElementsByClassName("choose"); if(allChoose.checked){ for(var i= 0;i<list.length;i++){ list[i].checked=true; } return true; }else{ for(var i=0;i<list.length;i++){ list[i].checked=false; } return false; } }
效果如下: