构思

　　通过for循环和for in循环来实现，界面效果如下

　　

步骤

　　全选：

　　　　　　循环给所有的表单设置checked

　　反选：

　　　　　　循环内判断checked是否为true，如果为true则改为false否则改为true

　　获取值：

　　　　　　最开始用for取，但是只打印最后一个，然后就放弃直接使用for in 来取值，后面有时间再思考这个。如果有更好的方法，您可以在评论区留下。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单</title>

</head>

<body>

    <div id="check">

        <input type="checkbox"  value="A">A <br>

        <input type="checkbox"  value="B">B <br>

        <input type="checkbox"  value="C">C <br>

        <input type="checkbox"  value="D">D <br>

        <input type="checkbox"  value="E">E <br>

    </div>

    <br><br>

    <input type="button" onclick="checkAll();" value="全选">

    <input type="button" onclick="checkRev()" value="反选">

    <input type="button" onclick="getAll()" value="获取">

</body>

    <script>

        var oCheck  = document.getElementById('check');

        var oInput = oCheck.getElementsByTagName('input');

        // 全选

        function checkAll(){

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

                oInput[i].checked = true;

            }

        }

        // 反选

        function checkRev(){

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

                if (oInput[i].checked) {

                    oInput[i].checked = false;

                }else{

                    oInput[i].checked = true;

                }

            }

        }

        // 获取值

         var oRes = [];

        function getAll(){

            for(var i in oInput){

                if(oInput[i].checked == true){

                    oRes.push('第' + (Number(i)+1) + '个选项,您的选择是' + oInput[i].value);

                }

            }

            if (oRes.length == 0) {

                alert('您没有选择任何值');

            }else{

                alert(oRes);

                oRes = [];

            }

        }

    </script>

</html>

　　

　　

JavaScript实现表单的全选,反选,获取值的更多相关文章

  1. 全选,反选,获取值ajax提交

    //必须先加载jquery //加载 弹出框插件 artdialog http://www.planeart.cn/demo/artDialog/ /****全选反选*开始**/ $(document ...

  2. 表单Checkbox全选反选全不选

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

  3. JQuery 全选 反选 获取Table 中指定td的元素值

    //全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...

  4. PHP基础班初学心得：用JQ实现表单的全选、反选、取消和删除功能

    摘要: 本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. ...

  5. Vue-表单验证-全选-反选-删除-批量删除

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. CheckBox复选框全选以及获取值

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

  7. 基于JQ的多选/全选/反选及获取选中的值

    <!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...

  8. 表单javascript checkbox全选 反选 全不选

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. BootStrapt iCheck表单美化插件使用方法详解（含参数、事件等） 全选 反选

    特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...

随机推荐

  1. python游戏开发之俄罗斯方块(一)：简版

    编程语言:python(3.6.4) 主要应用的模块:pygame (下面有源码,但是拒绝分享完整的源码,下面的代码整合起来就是完整的源码) 首先列出我的核心思路: 1,图像由"核心变量&q ...

  2. SSIS ->> Excel Destination无法接受大于255个字符长度的字符字段（转载）

    从下文的链接中找到一些背景,因为Excel会以前8行作为参考,如果某个字段前8行的最长长度没有超过255个字符,就会报错.如果知道某个字段属于描述性字段,而且字段的数据长度很可能超过255个字符长度, ...

  3. vue2.0中使用pug(jade)

    第一部分:pug(jade)模板引擎 pug,原名jade,是流行的HTML模板引擎,它是HAML在JavaScript上的实现,最大的特色是使用缩进排列替代成对标签. 它简化了HTML的成对标签的写 ...

  4. 【知识整理】这可能是最好的RxJava 2.x 入门教程（一）

    一.前言 这可能是最好的RxJava 2.x入门教程系列专栏 文章链接: 这可能是最好的RxJava 2.x 入门教程(完结版)[强力推荐] 这可能是最好的RxJava 2.x 入门教程(一) 这可能 ...

  5. Java 基础之一对象导论

    对象导论 1.1 抽象过程 所有编程语言都提供抽象机制.人们所能解决的问题的复杂性直接取决于抽象的类型和质量. 汇编语言是对底层机器的轻微抽象. 我们将问题空间中的元素及其再解空间中的表示称为对象.这 ...

  6. host大法之GitHub上不去

    dns解析慢,github上不去,慢 修改host. windows下路径为:C:\Windows\System32\drivers\etc\hosts Linux下路径:/etc/hosts 加入: ...

  7. mysql主从同步(2)-问题梳理

    之前详细介绍了Mysql主从复制的原理和部署过程,在mysql同步过程中会出现很多问题,导致数据同步异常.以下梳理了几种主从同步中可能存在的问题:1)slave运行过慢不能与master同步,也就是M ...

  8. Python 可调用对象

    除了用户定义的函数,调用运算符(即 ())还可以应用到其他对象上.如果想判断对象能否调用,可以使用内置的 callable() 函数.Python 数据模型文档列出了 7 种可调用对象.(1)用户定义 ...

  9. CF1016 D. Vasya And The Matrix

    传送门 [http://codeforces.com/group/1EzrFFyOc0/contest/1016/problem/D] 题意 已知矩阵n行m列,以及每一行,每一列所有元素的异或,用 a ...

  10. Substrings Sort

    You are given nn strings. Each string consists of lowercase English letters. Rearrange (reorder) the ...