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. C++ 中map 中迭代器的简单使用：

    public member function <map> std::map::find iterator find (const key_type& k); const_itera ...

  2. Clover(资源管理器增强)

    Clover(资源管理器增强) 下载地址:http://www.orsoon.com/Soft/13157.html 功能: Windows Explorer 资源管理器的一个扩展,为其增加类似谷歌  ...

  3. spring JTA多数据源事务管理详细教程

    <context:annotation-config /> <!-- 使用注解的包路径 --> <context:component-scan base-package= ...

  4. ajax 之js读取xml的多浏览器兼容

    主要是分为两大类:IE.其它浏览器 IE8以下只支持这种 InputVoltage.innerText = xmlDoc.getElementsByTagName(id)[0].text, 其它浏览器 ...

  5. js实现文本框限制输入数字和小数点--兼容多个浏览器

    <html> <head> <meta http-equiv="content-Type" content="text/html;chars ...

  6. [Effective JavaScript 笔记]第16条：避免使用eval创建局部变量

    js中的eval函数是一个强大.灵活的工具.强大的工具容易被滥用,所以了解是值得的.(本人只用过它来处理json数据).错误使用eval函数的方式一:允许它干扰作用域.调用eval函数会将其参数作为j ...

  7. Iphone和iPad适配, 横竖屏

    竖屏情况下: [UIScreen mainScreen].bounds.size.width = 320 [UIScreen mainScreen].bounds.size.width = 568 横 ...

  8. FastJSON 简介及其Map/JSON/String 互转

    在日志解析,前后端数据传输交互中,经常会遇到 String 与 map.json.xml 等格式相互转换与解析的场景,其中 json 基本成为了跨语言.跨前后端的事实上的标准数据交互格式.应该来说各个 ...

  9. lucas定理，组合数学问题

    对于C(n, m) mod p.这里的n,m,p(p为素数)都很大的情况.就不能再用C(n, m) = C(n - 1,m) + C(n - 1, m - 1)的公式递推了. 这里用到Lusac定理 ...

  10. 【转】Kettle集群

    本文转自:http://blog.csdn.net/dqswuyundong/article/details/5952009 Kettle集群 Kettle是一款开源的ETL工具,以其高效和可扩展性而 ...