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>

运行示意：

aaarticlea/png;base64,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" alt="" />

JavaScript案例四：全选练习的更多相关文章

  1. JavaScript Web API 全选反选案例

    全选反选 全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...

  2. javascript: checked 不可全选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. DOM操作案例之--全选与反选

    全选与反选在表单类的项目中还是很常见的,电商项目中的购物车一定少不了这个功能. 下面我只就用一个简单的案例做个演示吧. <div class="wrap"> <t ...

  4. JavaScript基础6——全选示例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. JavaScript实现单击全选 ,再次点击取消全选

                 以下为实现思路,已测试,供参考 var allSet = document.getElementById('allSet');//获取全选按钮元素 var a = allSe ...

  6. js(四) 全选/全不选和反选

    思路:通过选择全选的选框的状态stuts 即true/false控制其他选框. 首先 我们要通过.checked方法获取选框(全选/全不选)的值. function all(){ var stuts= ...

  7. html javascript checkbox实现全选功能

    html代码 <input type="checkbox" id="all" />all</input> <input type= ...

  8. Knockout案例： 全选

  9. JavaScript CheckBox实现全选和部分选择

    <html> <head> <script> function BatchAddToBasket() { var questionNums = ''; var ch ...

随机推荐

  1. Linux无法使用userdel删除用户和组的解决办法

    转自:http://www.linuxidc.com/Linux/2013-07/87371.htm 简述: 今天在看书的时候,看到有个实例,手痒痒的跟着做了起来...但是,出现问题了..测试的用户和 ...

  2. ThinkPHP自动获取关键词(调用第三方插件)

    ThinkPHP自动获取关键词调用在线discuz词库 先按照下图路径放好插件 方法如下 /** * 自动获取关键词(调用第三方插件) * @return [type] [description] * ...

  3. Entity Framework 关系约束配置

    前言 简单的说一下自己的理解,大家应该都很明白ADO.NET,也就是原生态的数据库操作,直接通过拼接SQL语句,表与表之间通过链接(inner join  left join  或者子查询),也就是在 ...

  4. excel插入当前时间快捷键Ctrl+；

    之前写了一篇editplus如何插入当前时间_Ctrl+D的文章,有的同学说excel用习惯了,那在这我们就说一下excel插入当前时间快捷键,让您在excel快速插入当前时间 excel插入当前时间 ...

  5. cocos2d-x创建精灵动画方式汇总

    1.创建精灵框架缓存,并向其中添加相应的动画文件(plist),最后,通过动画集缓存生产动画 CCSpriteFrameCache *cache = CCSpriteFrameCache::share ...

  6. cocos基础教程(1)Mac环境下搭建

    下面主要介绍cocos2d-x环境的设置以及android的环境搭建 1.下载cocos2d-x 3.0正式版      http://www.cocos2d-x.org/download 2.下载a ...

  7. [Effective JavaScript 笔记]第15条：当心局部块函数声明笨拙的作用域

    嵌套函数声明.没有标准的方法在局部块里声明函数,但可以在另一个函数的顶部嵌套函数声明. function f(){return "global"} function test(x) ...

  8. win7+ubuntu双系统中卸载ubuntu方法

    双系统中,如果要卸载ubuntu是不能够直接卸载的,需要使用一些特殊的方法.下面就为大家详细的介绍介绍. Step1 MBR引导区修复: 进入win7,下载个软件MbrFix,放在C:\windows ...

  9. iPhone取消软件更新上边的1

    去除设置的更新+1小红点提示主要分为越狱和非越狱设备两种方法. 越狱状态下方法: 首先将你的设备进行越狱: 越狱后安装ifile(这个自行搜索安装): 用ifile打开/System/Library/ ...

  10. linux增加自定义path和manpath

    linux安装软件到自定义路径时,新安装的命令需要带上路径才可以执行,不能像系统自带命令那样可以直接使用. 这个时候可以通过修改环境变量PATH和MANPATH,来实现像系统命令一样使用新安装的命令并 ...