构思

　　通过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. java計算年齡的工具類

    整理一篇Java計算年齡的工具類,方便實用 public static int getAgeByBirth(String birthday) throws ParseException { // 格式 ...

  2. WebApi系列~HttpClient的性能隐患 - 转

    最近在进行开发过程中,基于都是接口开发,A站接口访问B接口接口来请求数据,而在这个过程中我们使用的是HttpClient这个框架,当然也是微软自己的框架,性能当前没有问题,但如果你直接使用官方的写法, ...

  3. libgdx学习记录27——线段与线段相交检测

    给定p1, p2, p3, p4四个点,p1,p2为一条线段,p3,p4为一条线段,检测其是否有交点. 可分为三种情况: 1. L2与x轴平行 2. L2与y轴平行 3. L2与坐标轴不平行. (L1 ...

  4. SQL调优日记--并行等待的原理和问题排查

    概述 今天处理项目,客户反应数据库在某个时间段,反应特别慢.需要我们提供一些优化建议. 现象 由于是特定的时间段慢,排查起来就比较方便.直接查看这个时间段数据库的等待情况.查看等待类型发现了大量的CX ...

  5. Mvc_model实体数据验证

    MVC提供了很方便的数据验证,只需要在model里加入相关的正则等,那么就会在前台里生成相关的验证脚本.需要引用两个js文件: jquery.validate.min.js jquery.valida ...

  6. zookeeper 动态管理nginx配置

    假设我们有一个场景,所有服务器共享同一份配置文件,我们肯定不可能单独手动维护每台服务器,这时可以利用zookeeper的配置管理功能. 环境:python + nginx + zookeeper 目的 ...

  7. css-preprocessors

    what ? 预处理器是css 能够使用 变量.操作符.函数.mixins.interpolations 等类似于js 功能的一种语言. 目前比较常用是三种:SASS.less .stylus . W ...

  8. getUserMedia API及HTML5 调用摄像头和麦克风

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

  9. 个人作业week7——前端开发感想总结

    个人作业week7——前端开发感想总结 1. 反思 首先要谈谈在这次团队项目的工作中,我这边出现过的较为严重的一个问题:我和HoerWing (后端担当)合作时,最初因为我没有使用github(始终连 ...

  10. 毕业设计 之 二 PHP集成环境（Dreamweaver）使用

    毕业设计 之 二 PHP学习笔记(一) 作者:20135216 平台:windows10 软件:XAMPP,DreamWeaver 一.环境搭建 1.XAMPP下载安装 XAMPP是PHP.MySQL ...