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. 不起眼却有大作用的 .NET功能集(转发)

    http://www.cnblogs.com/powertoolsteam/p/top15features.html 目录 1. ObsoleteAttribute2. 设置默认值属性: Defaul ...

  2. thinkphp中field方法

    hinkPHP的CURD操作中有很多非常实用的方法,从这篇开始,我们会为大家一一介绍. 首先为大家介绍下field方法的用法.field属于模型的连贯操作方法之一,主要目的是标识要返回或者操作的字段, ...

  3. Cocos2d-x 3.0修改Android平台帧率fps - 解决游戏运行手机发热发烫问题

    使用Cocos2d-x 3.0开发游戏之后,发现游戏在android手机上发热非常严重,在魅族2上,几乎担心手机会爆炸了~~~采取的一个措施就是降低帧率,因为游戏对于帧率要求不是非常高. 做过coco ...

  4. Sql分隔字符串方法--split

    SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO --DEClARE @str varchar(500)='a,b2,v5,d3,ew,2,3,dd' ...

  5. [Effective JavaScript 笔记] 第2条：理解JavaScript的浮点数

    JavaScript数值型类型只有数字 js只有一种数值型数据类型,不管是整数还是浮点数,js都把归为数字. typeof 17;   // “number” typeof 98.6; // “num ...

  6. 滚动光效shader

    Shader "Custom/LightMove" { Properties { _MainTex ("Base (RGB)", 2D) = "whi ...

  7. Apache Common DbUtils

    前段时间使用了Apache Common DbUtils这个工具,在此留个印,以备不时查看.大家都知道现在市面上的数据库访问层的框架很多,当然很多都是包含了OR-Mapping工作步骤的 例如大家常用 ...

  8. 【数据库】如家汉庭酒店2000万开房数据1.71G/BAK，792M/CSV

    多家连锁酒店使用了某网络有限公司,开发的酒店WiFi管理.认证管理系统.用户在酒店连接开放的WiFi,上网时会被要求通过网页认证,填写相关信息.这个认证不是在酒店服务器完成的,而是在 某公司 的认证服 ...

  9. js中document.documentElement 和document.body 以及其属性 clientWidth等

    在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准 ...

  10. 在Shell里面判断字符串是否为空

     在Shell里面判断字符串是否为空 分类: Linux shell2011-12-28 23:18 15371人阅读 评论(0) 收藏 举报 shell 主要有以下几种方法: echo “$str” ...