摘要:<html> <head> <meta charset="utf-8"> <title>全选</title> <style type="te
<html> <head> <meta charset="utf-8"> <title>全选</title> <style type="text/css"> table { width: 200px; text-align: center; margin: 20px auto; } </style> <script type="text/javascript"> function checkall() { var checkall, item; checkall = document.getElementById('checkall') //获取全选 item=document.getElementsByName('item[]') //获取勾选框 for (var i = 0; i < item.length; i++) { if (checkall.checked) { //checked 是选中 item[i].checked=true; //如果全选框被选中,则勾选框选中 } else { item[i].checked=false; //反之 } } } </script> </head> <body> <div class="box"> <table border="1px"> <tr> <th><input type="checkbox" id="checkall" onclick="checkall()"/>全选</th> <th>选项</th> </tr> <tr> <td><input type="checkbox" name="item[]"/></td> <td>html</td> </tr> <tr> <td><input type="checkbox" name="item[]"/></td> <td>css</td> </tr> <tr> <td><input type="checkbox" name="item[]"/></td> <td>JavaScript</td> </tr> <tr> <td><input type="checkbox" name="item[]"/></td> <td>jQuery</td> </tr> <tr> <td><input type="checkbox" name="item[]"/></td> <td>web</td> </tr> </table> </div> </body> </html>
是用table做的,样式可以好看点,另外不需要设置很多div的属性
批改老师:韦小宝批改时间:2018-11-02 10:58:42
老师总结:很不错!使用table当然也可以完成!在早一段时间还有人使用table直接对对网页继续布局呢!不过个人感觉并没有div方法!但是多了解一种方法也是很不错的体验!看好你!是一个学习的好料哦!哈哈!不要骄