构思

　　通过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. ThreadLocal可能引起的内存泄露

    threadlocal里面使用了一个存在弱引用的map,当释放掉threadlocal的强引用以后,map里面的value却没有被回收.而这块value永远不会被访问到了. 所以存在着内存泄露. 最好 ...

  2. odoo 装饰器用法@api

    摘自:blog.csdn.net/cmzhuang/article/details/52932883 @api.one one装饰符自动遍历记录集,把self重新定义成当前记录.注意,返回值是一个li ...

  3. [Spark][Python]获得 key,value形式的 RDD

    [Spark][Python]获得 key,value形式的 RDD [training@localhost ~]$ cat users.txtuser001 Fred Flintstoneuser0 ...

  4. 换了电脑如何使用hexo继续写博客

    前言 我们知道,使用 Github+hexo 搭建一个个人博客确实需要花不少时间的,我们搭好博客后使用的挺好,但是如果我们有一天电脑突然坏了,或者换了系统,那么我们怎么使用 hexo 再发布文章到个人 ...

  5. for循环两个略骚的写法

    骚写法 或许你知道,总之我觉得很酷,希望你也这么认为. 递增遍历 最常见场景,从 0 到 10 的遍历,不输出 10: for(let i = -1; ++i < 10;) { console. ...

  6. iOS开发简记（2）：自定义tabbar

    tabbar是放在APP底部的控件.常见的APP都使用tabbar来进行功能分类的管理,比如微信.QQ等等. 小程需要一个特殊一点的tabbar,要求突显中间的那个按钮,让中间按钮特别显眼,从而引导用 ...

  7. Vue 实际项目中你可能会遇见问题

    纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. ...

  8. C#断点续传下载。

    断点续传 最近在优化之前的下载流程,仅此篇幅留作笔记之用,日后其他研究此类问题的伙伴可以马上了解原理和开发,减少开发成本. 原理:断点续传目前比较通用的是使用HTTP续传方式,相关的资料可以通过访问: ...

  9. C#_XML与Object转换

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.X ...

  10. 基于 CentOS 搭建 FTP 文件服务

    https://www.linuxidc.com/Linux/2017-11/148518.htm