|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <!-- <style> *{ font-family: 微软雅黑; margin: 0px; padding: 0px; } </style> --> </head> <body> <form action="javascript:"> <p>选择爱好:</p> <p><label><input type="checkbox" name="">爬山</label></p> <p><label><input type="checkbox" name="">爬山</label></p> <p><label><input type="checkbox" name="">爬山</label></p> <p><label><input type="checkbox" name="">爬山</label></p> <p><label><input type="checkbox" name="">爬山</label></p> <p><label><input type="checkbox" name="">爬山</label></p> <p><label><input type="checkbox" name="">爬山</label></p> <p><label><input type="checkbox" name="">爬山</label></p> <p> <button id='all'>全选</button> <button id='noall'>全不选</button> <button id='unall'>反选</button> </p> </form> </body> <script> all=document.getElementById('all'); noall=document.getElementById('noall'); unall=document.getElementById('unall'); objs=document.getElementsByTagName('input'); //全选 all.onclick=function(){ for(i=0;i<objs.length;i++){ objs.checked=true; } } //全不选 noall.onclick=function(){ for(i=0;i<objs.length;i++){ objs.checked=false; } } //反选 unall.onclick=function(){ for(i=0;i<objs.length;i++){ // if(objs.checked){ // objs.checked=false; // }else{ // objs.checked=true; // } //三元运算符改进 //objs.checked=objs.checked?false:true; //一元运算符 objs.checked=!objs.checked; } } </script> </html> |
|