全选和反选案例

关键代码：
<!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>