使用JavaScript完成表格的全選與取消
阿新 • • 發佈：2018-05-05
fun 技術 doctype AR display onclick opp hide lap 
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>使用JavaScript實現全選與取消</title> <script> //選擇all復選框，判斷每個子復選框的checked值是否與all復選框的值一樣 function chooseAll() { var flag=document.getElementById(View Code"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>>
使用JavaScript完成表格的全選與取消