<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> var choose={ btns:[], box:[], xuanze:function(){ this.box=document.querySelectorAll('input'); return this; }, chooseAll:function(){ for(var i=0;i<this.box.length;i++){ this.box[i].checked=true; } }, //全选函数 chooseNo:function(){ for(var i=0;i<this.box.length;i++){ this.box[i].checked=false; } }, //不选函数 chooseOr:function(){ for(var i=0;i<this.box.length;i++){ if(this.box[i].checked){ this.box[i].checked=false; }else{ this.box[i].checked=true; } } } //反选函数 } //以下为调用函数 window.οnlοad=function(){ var btn=document.querySelectorAll('button'); btn[0].οnclick=function(){ choose.xuanze().chooseAll(); }; btn[1].οnclick=function(){ choose.xuanze().chooseNo(); } btn[2].οnclick=function(){ choose.xuanze().chooseOr(); } } </script> </head> <body> <button>全选</button> <button>不选</button> <button>反选</button><br> <input type="checkbox" name="" id=""><br> <input type="checkbox" name="" id=""><br> <input type="checkbox" name="" id=""><br> <input type="checkbox" name="" id=""><br> <input type="checkbox" name="" id=""><br> <input type="checkbox" name="" id=""><br> <input type="checkbox" name="" id=""><br> <input type="checkbox" name="" id=""><br> <input type="checkbox" name="" id=""><br> <input type="checkbox" name="" id=""><br> </body> </html>