JavaScript案例四：全选练习

最新推荐文章于 2024-07-28 20:27:10 发布

weixin_30918633

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量120

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fengmingyue/p/5950321.html

版权

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>

运行示意：

转载于:https://www.cnblogs.com/fengmingyue/p/5950321.html

weixin_30918633

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript案例四：全选练习

JavaScript实现全选，全不选等效果。。。<!DOCTYPE html><html> <head> <title>JavaScript全选练习</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8...
复制链接

扫一扫