构思

　　通过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. day87

    分页器 PageNumberPagination(普通分页器) 说明: 配置分页器的中最大显示个数(也可在setting中做全局配置) page.page_size = 2 REST_FRAMEWOR ...

  2. BZOJ4985 评分 二分答案、DP

    传送门 题意:自己去看 答案满足单调性,所以考虑二分答案. 二分答案很好想,但是check并不是很好想. 考虑DP:设$f_i$表示队列中第$i$个人的分数$\geq \, mid$的代价,最开始$N ...

  3. flask-sqlalchemy组件

    一.简介 flask本身没有内置orm框架,需要依赖第三方模块,这里介绍flask-sqlalchemy,而flask-sqlalchemy是一个flask的扩展,本质上是对sqlalchemy的进一 ...

  4. Iterable接口

    Iterable接口 总览 这个接口用来表明可以进行迭代.具体的迭代方式,可以通过iterator()方法获取到一个迭代器,在迭代器中会实现如何获取下一个元素,以及是否迭代结束. java8中源码如下 ...

  5. 浅谈博弈论中的两个基本模型——Bash Game&&Nim Game

    最近在数学这一块搞了蛮多题目,已经解决了数论基础,线性代数(只有矩阵,行列式待坑),组合数学中的一些简单问题.所以接下来不可避免的对博弈论这一哲学大坑开工. 当然,由于我很菜,所以也只能从最基础最容易 ...

  6. python中和生成器协程相关的yield之最详最强解释，一看就懂（一）

    yield是python中一个非常重要的关键词,所有迭代器都是yield实现的,学习python,如果不把这个yield的意思和用法彻底搞清楚,学习python的生成器,协程和异步io的时候,就会彻底 ...

  7. apache工作模式总结及网站访问缓慢处理记录

    apache目前主要有两种模式:prefork模式和worker模式:1)prefork模式(默认模式)prefork是Unix平台上的默认(缺省)MPM,使用多个子进程,每个子进程只有一个线程.每个 ...

  8. 遇到的eclipse启动报错问题解决

    遇到的eclipse启动报错问题解决 一.启动时出现Java was started but returned exit code=13 可能原因: 1.eclipse与JDK的不是都64位或者32位 ...

  9. 个人博客week2

    1. 是否需要有代码规范 对于是否需要有代码规范,请考虑下列论点并反驳/支持: 这些规范都是官僚制度下产生的浪费大家的编程时间.影响人们开发效率, 浪费时间的东西. 我是个艺术家,手艺人,我有自己的规 ...

  10. 语音笔记：MFCC

    一,传统语音识别体系结构 二,MFCC特征提取 MFCC(Mel-frequency cepstral coefficients):梅尔频率倒谱系数.梅尔频率是基于人耳听觉特性提出来的, 它与Hz频率 ...