利用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. 【算法】串的模式匹配算法（KMP）

    串的模式匹配算法     问题:         求子串位置的定位函数如何写? int index(SString S,SString T,int pos);         给定串S,子串T,问T在 ...

  2. .net core 2.0 Autofac

    参考自 https://github.com/VictorTzeng/Zxw.Framework.NetCore 安装Autofac,在`project.csproj`加入 <PackageRe ...

  3. BZOJ2480Spoj3105 Mod&BZOJ1467Pku3243 clever Y——EXBSGS

    题目描述 已知数a,p,b,求满足a^x≡b(mod p)的最小自然数x. 输入     每个测试文件中最多包含100组测试数据.     每组数据中,每行包含3个正整数a,p,b.     当a=p ...

  4. Codeforces Round #468 Div. 1

    D:首先考虑如果给定白棋位置,如何判断胜负.黑棋获胜需要四个方向都有能贴上白棋的棋子.由于每一轮都必须移动,显然先对平面黑白染色一下,只有与白棋所在格异色的黑棋才需要考虑.考虑让一个黑棋去贴上白棋某个 ...

  5. Listview 包含 edittext 的解决方案

    转载:https://blog.csdn.net/qq_28268507/article/details/53666576 一. 前几天在群里聊天,碰到一个哥们问listview的itemview中包 ...

  6. LOJ2269 [SDOI2017] 切树游戏 【FWT】【动态DP】【树链剖分】【线段树】

    题目分析: 好题.本来是一道好的非套路题,但是不凑巧的是当年有一位国家集训队员正好介绍了这个算法. 首先考虑静态的情况.这个的DP方程非常容易写出来. 接着可以注意到对于异或结果的计数可以看成一个FW ...

  7. Django 调用报错 " ImportError: Couldn't import Django. "

    系统炸了导致不得已重装 安装 Django后 利用ORM 创建表的时候报错 Traceback (most recent call last): File "manage.py", ...

  8. Leetcode 350.两个数组的交集|| By Python

    给定两个数组,编写一个函数来计算它们的交集. 示例 1: 输入: nums1 = [1,2,2,1], nums2 = [2,2] 输出: [2,2] 示例 2: 输入: nums1 = [4,9,5 ...

  9. python3 hashlib模块

    hashlib是一个加密模块,可以将明文加密为密文: md5,sha加密:过程不可逆转.

  10. rdesktop ERROR: CredSSP: Initialize failed, do you have correct kerberos tgt initialized ? Failed to connect, CredSSP required by server

    错误信息: ERROR: CredSSP: Initialize failed, do you have correct kerberos tgt initialized ? Failed to co ...