如何实现复选框的全选和取消全选效果

如何实现复选框的全选和取消全选效果:在很多网站都有这样的功能,当点击一个全选按钮之后,所有的复选框都会被选中,再点击之后会取消全选,功能非常的人性化,可以省却很多人力,下面就简单介绍一下JS如何实现此

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

如何实现复选框的全选和取消全选效果此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“”,获取验证码。在微信里搜索“”或者“”或者微信扫描右侧二维码都可以关注本站微信公众号。

如何实现复选框的全选和取消全选效果:
在很多网站都有这样的功能,当点击一个全选按钮之后,所有的复选框都会被选中,再点击之后会取消全选,功能非常的人性化,可以省却很多人力,下面就简单介绍一下JS如何实现此功能,代码实例如下:

先体验效果:http://hovertree.com/texiao/js/

以下是代码:

<html>
<head>
    <meta charset=" utf-8">
    <meta name="author" content="http://hovertree.com/" />
    <title>JS实现复选框的全选和取消全选 - 何问起</title><base target="_blank" />
    <style type="text/css">
        li {
            list-style-type: none;
            font-size: 12px;
            color: blue;
            width: 300px;
            height: 20px;
            line-height: 20px;
        }

        a {
            width: 200px;
            height: 20px;
            float: left;
        }

        .ck {
            float: left;
            width: 26px;
        }

        .time {
            color: red;
            width: 60px;
            height: 20px;
            float: right;
        }

        .dohovertree {
            font-size: 12px;
        }
    </style>
    <script type="text/javascript">

window.onload=function()
{
  var checkboxs=document.getElementsByName("myHove"+"rTreechk");
  var hvtck=document.getElementById("hvtck");
  cklen=checkboxs.length;
  hvtck.onclick=function()
  {
    if(this.checked==true)
    {
      for(var i=0;i<cklen;i++)
      {
        checkboxs[i].checked=true;
      }
      document.getElementById("dohovert"+"ree").innerHTML="取消"
    }
    else
    {
      for(var i=0;i<cklen;i++)
      {
        checkboxs[i].checked=false;
      }
      document.getElementById("dohovertree").innerHTML="全选"
    }
  }
}
    </script>
</head>
<body>
    <h3>JS实现复选框的全选和取消全选 何问起</h3>
    <div style="width:736px">
        <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">更多特效</a> <a href="http://hovertree.com/hvtart/bjae/91eqf5ge.htm">原文</a>
    </div>
    <div>
        <ul>
            <li>
                <span class="ck"><input type="checkbox" name="myHoverTreechk" /></span>
                <a href="http://hovertree.com/">何问起欢迎您</a>
                <span class="time">2014-12-13</span>
            </li>
            <li>
                <span class="ck"><input type="checkbox" name="myHoverTreechk" /></span>
                <a href="http://hovertree.com/hvtart/bjae/91eqf5ge.htm">大家好,好久不见了</a>
                <span class="time">2015-12-03</span>
            </li>
            <li>
                <span class="ck"><input type="checkbox" name="myHoverTreechk" /></span>
                <a href="http://hovertree.com/menu/javascript/">何问起JS</a>
                <span class="time">2015-11-13</span>
            </li>
        </ul>
        <div>
            <input type="checkbox" id="hvtck" />
            <span class="dohovertree" id="dohovertree">全选</span>
        </div>
    </div>
</body>
</html>

 

以上代码实现了复选框的全选与不全选效果,下面就简单介绍一下如何实现此功能。
一.通过下面两个语句分别获取要选取的复选框对象集合和要点击的复选框对象:

var checkboxs=document.getElementsByName(“myHove”+”rTreechk”);
var hvtck=document.getElementById(“hvtck”);

通过以下语句获取要选取复选框的数量:
cklen=checkboxs.length;

二.为myck对象绑定onclick事件处理函数。事件处理函数事先判断hvtck对象是否被选中,如果被选中的话,则遍历复选框,挨个取消选中状态,并且通过document.getElementById(“dohovertree”).innerHTML=”取消”将dohovertree元素中的文本设置为取消,else语句中的原理是一样的,这里就不重复介绍了。

今天大雪,你那里下雪了吗?http://keleyi.com/a/bjac/e8t7hoj4.htm

博客园 roucheng js,jquery,css,html5特效 http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120693.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 使用mshta.exe绕过应用程序白名单

    使用mshta.exe绕过应用程序白名单今天,我们将学习有关HTA攻击的不同方法。HTA是有用且重要的攻击,因为它可以绕过应用程序白名单。在上一篇文章中,我们讨论了“WindowsApplocker策略-入门指南”,因为它们定义了应用

  • 个人觉得好用的Xmind快捷键(mac)[通俗易懂]

    个人觉得好用的Xmind快捷键(mac)[通俗易懂]commandN新建脑图空格修改文字Delete删除文字commandZ撤销上一步Enter添加平行分支Tab添加子节点command+/-放大/缩小commandI上传图片command+Shift+H插入超链接command+1,2,3,4,5,6快速添加优先等级图标-收缩目前分支方向键展开当前分支…

  • BGP AnyCast

    BGP AnyCast什么是BGPAnyCast?BGPanycast就是利用一个(多个)as号码在不同的地区广播相同的一个ip段。利用bgp的寻路原则,短的aspath会选成最优路径(bgp寻路原则之n),从而优化了访问速度。其实bgpanycast是不同服务器用了相同的ip地址。阿里的DNS就是使用了BGPAnyCast“其实bgpanycast是不同服务器用了相同的ip地址…

  • sublime text激活码(JetBrains全家桶)[通俗易懂]

    (sublime text激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~1S…

  • phpstorm2021.4.4激活码_通用破解码

    phpstorm2021.4.4激活码_通用破解码,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • linux挖矿病毒工具,Linux服务器挖矿病毒

    linux挖矿病毒工具,Linux服务器挖矿病毒攻击者通过Redis未授权访问,写入定时任务,执行挖矿程序。排查过程检查进程发现SSH后门[root@testservertmp]#psaux|grep2345|grep-vgreproot135870.00.0666241144?SsMar220:00/tmp/su-oPort=2345[root@testservertmp]#lsof-p135…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号