CSS與js--全選功能
阿新 • • 發佈：2018-11-27
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function first() { var as=document.getElementsByName("one"); var a1=document.getElementById("two"); for (var i=0;i<as.length;i++){ as[i].checked=a1.checked; } } function cheaked() { var count =0; var aa=document.getElementById("two"); var aa1=document.getElementsByName("one"); for(var i=0;i<aa1.length;i++){ if(aa1[i].checked){ count+=1; if(count == aa1.length){ aa.checked=true; }else { aa.checked=false; } } } } </script> </head> <body> 全選<input type="checkbox" id="two" onclick="first()"> <table border="1px" width="500px" height="100px" onchange="cheaked()"> <tr> <td>選擇</td> <td>姓名</td> <td>證件型別</td> </tr> <tr> <td><input type="checkbox" name="one" onclick="cheaked()" ></td> <td>使用者1</td> <td>1</td> </tr> <tr> <td><input type="checkbox" name="one" onclick="cheaked()"></td> <td>使用者2</td> <td>1</td> </tr> </table> </body> </html>
程式碼實現：