<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input type="button" value="全选" ondblclick="ChooseAll();"> <input type="button" value="取消" ondblclick="CancelAll();"> <input type="button" value="反选" ondblclick="TrunAll();"> </div> <div> <table> <thead> <tr> <th>序号</th> <th>用户</th> <th>年龄</th> </tr> </thead> <tbody id="c1"> <tr > <td ><input class="i1" type="checkbox"/></td> <td>alex</td> <td>18</td> </tr> <tr> <td ><input class="i1" type="checkbox"/></td> <td>alex</td> <td>18</td> </tr> <tr > <td ><input class="i1" type="checkbox"/></td> <td>alex</td> <td>18</td> </tr> </tbody> </table> </div> <script> function ChooseAll() { var td= document.getElementById('c1'); var doc = td.getElementsByClassName('i1'); for(var i=0;i<doc.length;i++){ var current = doc[i]; current.checked = true; } } function CancelAll() { var td= document.getElementById('c1'); var doc = td.getElementsByClassName('i1'); for(var i=0;i<doc.length;i++) { var current = doc[i]; current.checked = false; } } function TrunAll() { var td= document.getElementById('c1'); var doc = td.getElementsByClassName('i1'); for(var i=0;i<doc.length;i++) { var current = doc[i]; if (current.checked){ current.checked = false; }else { current.checked = true; } } } </script> </body> </html>