初识面向对象，并完成全选，不选，与反选
Posted 小菜园的菜
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初识面向对象，并完成全选，不选，与反选相关的知识，希望对你有一定的参考价值。
<!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.onload=function(){ var btn=document.querySelectorAll(‘button‘); btn[0].onclick=function(){ choose.xuanze().chooseAll(); }; btn[1].onclick=function(){ choose.xuanze().chooseNo(); } btn[2].onclick=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>
以上是关于初识面向对象，并完成全选，不选，与反选的主要内容，如果未能解决你的问题，请参考以下文章