构思

　　通过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. RDLC报表显示存储于数据库的图片

    图片以二进制存储于数据库表中.在显示RDLC报表时,把图片呈现出来. 好吧. 把存储过程写好: CREATE PROCEDURE [dbo].[usp_File_Select] AS SELECT [ ...

  2. Ubuntu 安装google chrome

    sudo apt-get install google-chrome-stable /usr/bin/google-chrome-stable

  3. Java并发——线程中断学习

    1. 使用interrupt()中断线程 当一个线程运行时,另一个线程可以调用对应的Thread对象的interrupt()方法来中断它,该方法只是在目标线程中设置一个标志,表示它已经被中断,并立即返 ...

  4. 使用sklearn进行K_Means聚类算法

    首先附上官网说明 [http://scikit-learn.org/stable/modules/generated/sklearn.cluster.KMeans.html#examples-usin ...

  5. 【php增删改查实例】第十三节 - EasyUI列格式化

    因为easyUI的datagrid组件是横着一格一格加载数据的,一行加载好了之后才会去加载下一行.所谓的列格式化,就是在加载某一列的所有单元格时,对即将加载到这些单元格的数据进行二次包装. 比如,我们 ...

  6. HNOI2019 爆零记

    HNOI2019爆零记 day \(-inf\) ~ day \(0\) 开学一周之后才停的课,停课之后就开始每天被包菜.我三月份几乎没有更博,就是因为每天都被虐的自闭了. day \(0\) 本来是 ...

  7. .net core实践系列之短信服务-为什么选择.net core（开篇）

    前言 从今天我将会写.net core实战系列,以我最近完成的短信服务作为例子.该系列将会尽量以最短的时间全部发布出来.源码也将优先开源出来给大家. 源码地址:https://github.com/S ...

  8. markdown操作手册

    **1.标题** # h1 h1自带分割线 ## h2 ### h3 #### h4 ##### h5 ###### h6 **2.圆点** - 圆点 **3.分割线,-和*都可以** --- *** ...

  9. PyCharm Tips 常用操作帮助

    以下内容转自 http://www.2cto.com/os/201410/341542.html --------------------------------------------------- ...

  10. 分布式监控系统Zabbix--完整安装记录 -添加apache监控

    前面介绍了zabbix3.0.3环境及相关监控项的添加,下面介绍下针对apache的监控配置:1)在apache配置文件中打开server-status状态访问功能(自带的) [root@IDC-Ad ...