<!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>>