全选和反选案例
关键代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <!--js部分，三个按钮，全选，取消，和反选，点击全选按钮时，下面所有选项之后的复选框都会选中；--> <!--点击取消按钮时，下面所有选项后的复选框都不会被选上；点击反选按钮时，下面选项后的复选框--> <!--如果选上了，就会被取消，如果没有选上，就会选上。--> <script> window.onload=function(){ var btns=document.getElementsByTagName("button"); var inputs=document.getElementsByTagName("input"); //把点击按钮1事件和点击按钮2事件封装成一个函数，给这个函数传入一个值，复选框相应的会有不同的反应 function all(flag){ for(var i=0;i<inputs.length;i++) { inputs[i].checked=flag; } } //函数调用时的用法要注意，是一个事件发生时，调用函数需要传入什么值，才能得到这个按钮需要的效果 btns[0].onclick=function() //错误写法：btns[0].all(true); { all(true); } btns[1].onclick=function() { all(false); } btns[2].onclick=function() //反选按钮可以用三目运算符来写，选中？false:true { for(var i=0;i<inputs.length;i++) { inputs[i].checked==true ? inputs[i].checked=false : inputs[i].checked=true // 错误写法inputs[i].checked==true? false:true; } } } </script> </head> <body> <button >全选</button> <button>取消</button> <button>反选</button> <ul> <li>选项1：<input type="checkbox" /></li> <!--type="checkbox"表示复选框--> <li>选项1：<input type="checkbox"/></li> <li>选项1：<input type="checkbox"/></li> <li>选项1：<input type="checkbox"/></li> <li>选项1：<input type="checkbox"/></li> <li>选项1：<input type="checkbox"/></li> <li>选项1：<input type="checkbox"/></li> </ul> </body> </html>
