利用input的checked属性来实现：checked值为true,表示被选择，否则反之。

效果：

js代码：

    <script>

            var butt1 = document.getElementById("butt1");

            var butt2 = document.getElementById("butt2");

            var butt3 = document.getElementById("butt3");

            var pInput = document.getElementById("pInput");

            var opInput = pInput.getElementsByTagName("input");

            butt1.onclick = function(){

                for(var i = 0;i<opInput.length;i++){

                    opInput[i].checked = true;

                }

            }

            butt2.onclick = function(){

                for(var i = 0;i< opInput.length;i++){

                    opInput[i].checked = false;

                }

            }

            butt3.onclick = function(){

                for(var i = 0;i< opInput.length;i++){

                    if(opInput[i].checked == false){

                        opInput[i].checked = true;

                    }

                    else{

                        opInput[i].checked = false;

                    }

                }

            }

    </script>

1.通过var butt1 = document.getElementById("butt1")来获取对应的id元素。

2.butt1.onclick = function(){  }添加点击事件

3.通过对应元素的.getElementsByTagName(" ")获取该元素下的所有子元素，即数组。（不要忘记那个s）

凡是通过.getElementsByTagName(" ")来获取标签元素的，最后都为数组，可以用索引[i]获取。

4.尽量不使用document.getElementByClassName来获取class元素，我从网上看似乎是说兼容性不太好，有时候浏览器识别不出来。

5.input是checkbox类型时才可进行多选，即全选。radio类型时只能是单选。

完整代码：

<html>

<head>

    <meta charset="utf-8" />

    <title>1</title>

</head>

<body>

    <div class="Form">

        <form>

            <input type="button" value="全选" id="butt1"></input>

            <input type="button" value="全不选" id="butt2"></input>

            <input type="button" value="反选" id="butt3"></input><br/>

        <p id="pInput">

            <input type="checkbox" value="苹果">苹果</input><br/>

            <input type="checkbox" value="香蕉">香蕉</input><br/>

            <input type="checkbox" value="橘子">橘子</input>

        </p>

        </form>

    </div>

</body>

<script>

            var butt1 = document.getElementById("butt1");

            var butt2 = document.getElementById("butt2");

            var butt3 = document.getElementById("butt3");

            var pInput = document.getElementById("pInput");

            var opInput = pInput.getElementsByTagName("input");

            butt1.onclick = function(){

                for(var i = 0;i<opInput.length;i++){

                    opInput[i].checked = true;

                }

            }

            butt2.onclick = function(){

                for(var i = 0;i< opInput.length;i++){

                    opInput[i].checked = false;

                }

            }

            butt3.onclick = function(){

                for(var i = 0;i< opInput.length;i++){

                    if(opInput[i].checked == false){

                        opInput[i].checked = true;

                    }

                    else{

                        opInput[i].checked = false;

                    }

                }

            }

    </script>

</html>

参考博客：https://www.cnblogs.com/tynam/p/9833759.html

javascript实现全选，全不选，反选的更多相关文章

  1. jquery 全选 全不选 反选

    1.概述 在项目中经常遇到列表中对复选框进行勾选操作,全选...反选.. 2. example <html> <body> <form id="test-for ...

  2. JavaScript案例四：全选练习

    JavaScript实现全选,全不选等效果... <!DOCTYPE html> <html> <head> <title>JavaScript全选练习 ...

  3. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  4. jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法

    如下图: <head> <title></title> <style type="text/css"> div { border: ...

  5. 【七】jquery之属性attr、 removeAttr、prop[全选全不选及反选]

    全选全不选 界面: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  6. js实现全选/全不选、反选

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jQuery实现全选、不选和反选功能

    jQuery结合Font Awesome字体图标实现全选.不选和反选功能 Font Awesome字体图标链接地址:http://www.fontawesome.com.cn/faicons/ 效果: ...

  8. JavaScript自动计算价格和全选

    JavaScript自动计算价格和全选,价格自增加减,复选框,反选,全选. 如图: 如图: CSS代码 @charset "gb2312"; /* CSS Document */ ...

  9. js实现复选框全选/全不选/反选

    js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  10. Java 多选框的全选、多选、反选（JQuery 实现）

    jQuery 实现全选.多选.反选 学习内容: 需求 总结: 学习内容: 需求 jQuery 实现全选.多选.反选 实现代码 <!DOCTYPE html> <html lang=& ...

随机推荐

  1. poj-1236（强连通分量）

    题意:给你n个点,每个点可能有指向其他点的单向边,代表这个点可以把软件传给他指向的点,然后解决两个问题, 1.问你最少需要给几个点,才能使所有点都能拿到软件: 2.问你还需要增加几条单向边,才能使任意 ...

  2. python----函数的动态传参

    函数的动态传参 *args 将所有的实参的位置参数聚合到一个元组,并将这个元组赋值给args 有些时候,对于函数,传入的实参数量可能是不固定的,也就是动态的,这个时候我们就需要用到函数的动态传参.下面 ...

  3. BZOJ 2002 弹飞绵羊

    LCT 刚学LCT,对LCT的性质不太熟练,还需要多多练习.. 对每一个点,将其与它能够到达的点连一条虚边.弹出去的话就用n+1这个节点表示. 第一种操作我们需要从LCT的性质入手,问的问题其实就是x ...

  4. 09 Zabbix4.0系统clone、mass update使用

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 09 Zabbix4.0系统clone.mass update使用 1. clone使用: clo ...

  5. 【JDK源码】将JDK源码导入IDEA中

    新建工程 在IDEA中新建普通JAVA工程,步骤如下: 导入源码 首先可以通过如下方法找到工程目录. 在JDK安装目录下找到源码包src.zip,如下图 将src.zip包解压,并将src目录下的内容 ...

  6. luogu4159 迷路 (矩阵加速)

    考虑如果只有距离为1的边,那我用在时间i到达某个点的状态数矩阵 乘上转移矩阵(就是边的邻接矩阵),就能得到i+1时间的 然后又考虑到边权只有1~9,那可以把边拆成只有距离为1的 具体做法是一个点拆成9 ...

  7. bzoj1066 蜥蜴 (dinic)

    最大流板子题. 对于每根柱子,建两个点ai,bi,建边(ai,bi,柱子高度) 对于距离不超过d的两根柱子i,j,建边(bi,aj,inf) 对于起始位置在i的每个蜥蜴,建边(S,ai,1) 对于能跳 ...

  8. Intervals POJ - 3680 （MCMF）

    给你一些区间,每个区间都有些价值.取一个区间就能获得对应的价值,并且一个点不能覆盖超过k次,问你最大的价值是多少. 我们可以把这些区间放到一维的轴上去,然后我们可以把它看成一个需要从左到右的过程,然后 ...

  9. CF932E Team Work（第二类斯特林数）

    传送门:CF原网 洛谷 题意:给定 $n,k$,求 $\sum\limits^n_{i=1}\dbinom{n}{i}i^k\bmod(10^9+7)$. $1\le n\le 10^9,1\le k ...

  10. nginx日志文件的定时切割与归纳

    应用环境:生产环境中的Nginx服务器,由于访问日志文件增长速度非常快,日志太大会严重影响服务器效率.同时,为了 方便对日志进行分析计算,须要对日志文件进行定时切割.定时切割的方式有按月切割.按天切割 ...