JavaScript案例四：全选练习

JavaScript实现全选，全不选等效果。。。

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript全选练习</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" >
        function chooseAll()//全选
        {
            var a=document.getElementsByName("box");
            for(var i=0;i<a.length;i++)
            {
                a[i].checked=true;
            }
        }
        function chooseNo()//全不选
        {
            var a=document.getElementsByName("box");
            for(var i=0;i<a.length;i++)
            {
                a[i].checked=false;
            }
        }
        function chooseRe()//反选
        {
            var a=document.getElementsByName("box");
            for(var i=0;i<a.length;i++)
            {
                if(a[i].checked==false) a[i].checked=true;
                else a[i].checked=false;
            }
        }
        function chooseAllNo()//全选、全不选
        {
            var a=document.getElementsByName("box");
            var b=document.getElementById("abox");
            if(b.checked==true)
            {
                for(var i=0;i<a.length;i++)
                {
                    a[i].checked=true;
                }
            }
            else
            {
                for(var i=0;i<a.length;i++)
                {
                    a[i].checked=false;
                }
            }
        }
    </script>
  </head>
  <body>
      <input type="checkbox" id="abox" onclick="chooseAllNo();">全选/全不选<br>
      <input type="checkbox" name="box">张三<br>
      <input type="checkbox" name="box">李四<br>
      <input type="checkbox" name="box">王五<br>
      <input type="checkbox" name="box">赵六<br>
      <input type="button" value="全选" onclick="chooseAll();"/>
      <input type="button" value="全不选"  onclick="chooseNo();"/>
      <input type="button" value="反选"  onclick="chooseRe();"/>
  </body>
</html>

 

运行示意：

posted @ 2016-10-11 18:19  凌晨。。。三点  阅读(274)  评论(0)  编辑  收藏  举报