JavaScript实现表单的全选,反选,获取值
构思
通过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实现表单的全选,反选,获取值的更多相关文章
- 全选,反选,获取值ajax提交
//必须先加载jquery //加载 弹出框插件 artdialog http://www.planeart.cn/demo/artDialog/ /****全选反选*开始**/ $(document ...
- 表单Checkbox全选反选全不选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQuery 全选 反选 获取Table 中指定td的元素值
//全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...
- PHP基础班初学心得：用JQ实现表单的全选、反选、取消和删除功能
摘要: 本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. ...
- Vue-表单验证-全选-反选-删除-批量删除
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- CheckBox复选框全选以及获取值
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 基于JQ的多选/全选/反选及获取选中的值
<!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...
- 表单javascript checkbox全选 反选 全不选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- BootStrapt iCheck表单美化插件使用方法详解（含参数、事件等） 全选 反选
特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...
随机推荐
- Selenium：浏览器及鼠标、键盘事件
参考文档:WebDriver官方文档,下载链接:http://download.csdn.net/detail/kwgkwg001/4004500 虫师:<selenium2自动化测试实战-基于 ...
- 有哪些操作会使用到TempDB；如果TempDB异常变大，可能的原因是什么，该如何处理（转载）
有哪些操作会使用到TempDB:如果TempDB异常变大,可能的原因是什么,该如何处理:tempdb的用途: 存储专用和全局临时变量,不考虑数据库上下文: 与Order by 子句,游标,Group ...
- 3.3《想成为黑客，不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)——less即more
Unix提供了两个工具查看不止文件的头部和尾部.这个功能程序叫做more,但有种更强大的变异体叫做less(起初我认为这是玩笑).less这个程序是交互性地,所以很难在输出时捕获,但是仍然为大家提供了 ...
- 如何把js的代码写的更加容易维护(一)--面向对象编程
总是头疼javascript的代码写起来不可维护,那么看看下面的代码: (function (w, $) { var app = { init: function () { var me = this ...
- 使用IE浏览提示：该页面无法显示
问题描述: 我们有一个外部招聘的网站,DBA反馈新版上线过后首页集成的登录部分页面无法打开,一直显示“该页面无法显示”! 问题排查: 1.因为我本身也不是负责这一块的业务,刚开始以为是网站本身程序的问 ...
- C# 深浅复制 MemberwiseClone
学无止境,精益求精 十年河东,十年河西,莫欺少年穷 学历代表你的过去,能力代表你的现在,学习代表你的将来 最近拜读了大话设计模式:原型模式,该模式主要应用C# 深浅复制来实现的!关于深浅复制大家可参考 ...
- Deep Learning（深度学习）学习笔记整理系列之（一）（转）
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-0 ...
- 使用Pyspark进行特征工程时的那些坑
以脚本spark_clean_online_action.py.数据集new_sxf_time_count_1781115582.csv为例: 集群节点包括212.216.217.218.需要注意的是 ...
- 阿里Java面经大全（整合版）
本文里的面经内容全部来源于牛客网,作为秋招备战复习与查缺补漏时使用.里面部分面经有我的注释和想法,以及部分解答,不一定正确,大家可以查询补充. 阿里巴巴,三面,java实习 昨天晚上11点打电话来,问 ...
- [linux] VirtualBox复制虚拟机
环境: Oracle VM VirtualBox 5.0.20 CentOS-6.7-x86_64-minimal.iso 1.复制虚拟机 -->右击休眠状态模板虚拟机,选择复制 -->填 ...