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. Java-Java中System.arraycopy() 和 Arrays.copyOf()两者之间的区别

    如果我们想拷贝一个数组,我们可能会使用System.arraycopy()或者Arrays.copyof()两种方式.在这里,我们将使用一个比较简单的示例来阐述两者之间的区别. 1.示例代码: Sys ...

  2. c/c++指针

    指针主要分: 指向单一的某个对象/变量, 用于多态或函数指针, 这个不难 - 一级指针 其次是指向数组, 用来操作/遍历数组元素 - 一级/二级指针 指向数组的一级指针很简单了: p指向的是数组的元素 ...

  3. HTML5中的Range对象的研究

    一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = docu ...

  4. mysql 启动 导入sql文件

    mysql mysqld.exe mysqld.exe 是mysql的服务器进程,只有先启动这个进程才能连接服务器 dos下进入mysql文件目录下的bin目录,输入mysql -u root -p ...

  5. 安装ruby

    (这些文章都是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) 过程中有点小曲折,我们leader是技术大牛,现在我生命中多了个超高智商处女座man了,还有一 ...

  6. 一段功能齐全的PHP常用重定向代码html+js+header

    /** * 重定向浏览器到指定的 URL * * @param string $url 要重定向的 url * @param int $delay 等待多少秒以后跳转 * @param bool $j ...

  7. java中四种阶乘的计算

    package com.zf.s2;//创建一个包   import java.math.BigInteger;//导入类 import java.util.ArrayList; import jav ...

  8. 【leetcode】Excel Sheet Column Number

    Excel Sheet Column Number Related to question Excel Sheet Column Title Given a column title as appea ...

  9. python 的类变量和对象变量

    python是一种解释性的语言,任何变量可以在使用的时候才声明以及定义,也可以在程序运行的任何位置进行声明和定义新的变量. class Man(object): #直接定义的类的变量,属于类 #其中 ...

  10. innobackupex err2

    报错: [root@DB dbdata]# innobackupex --defaults-file=/etc/my.cnf --user=root --password=123 /data/dbda ...