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.方便 ...
随机推荐
- Linux java 命令行编译 jar包
Java 命令行编译成class,然后在打包成jar文件. 编译成class javac -classpath $CLASS_PATH -d class ./src/Hello.java 可以通过ja ...
- Create-React-App 使用记录
如果要修改 host 和 端口,需要在项目根目录添加 .env 文件,然后再文件中添加 HOST=dev.zhengtongauto.com PORT=3000 如果需要加上反向代理,需要处理接口跨域 ...
- [Oracle]数据库的Control File 取Dump后的样例
[Oracle]数据库的Control File 取Dump后的样例: 片段截取-------------------------------(size = 40, compat size = 40, ...
- 【SDOI2017】数字表格
题面 题解 这道题目还有一种比较有意思的解法. 定义一种运算\((\mathbf f\oplus\mathbf g)(x) = \prod\limits_{d\mid x}\mathbf f(d)^{ ...
- .Net core使用EF Core Migration做数据库升级
---恢复内容开始--- (1)VS Code下创建含有授权功能的并且使用localdb作为数据库的命令 dotnet new -au individual -uld --name identityS ...
- 懒人小工具1：winform自动生成Model,Insert,Select,Delete以及导出Excel的方法
懒人小工具2:T4自动生成Model,Insert,Select,Delete以及导出Excel的方法 github地址:https://github.com/Jimmey-Jiang/J ...
- Zabbix监控系统部署：前端初始化
1. 概述 在上一篇博客<Zabbix监控系统部署:源码安装.md>中,主要进行了zabbix最新版的源码编译安装. (博客园地址:https://www.cnblogs.com/liwa ...
- 【nodejs】让nodejs像后端mvc框架（asp.net mvc ）一样处理请求--路由限制及选择篇（2/8）【route】
文章目录 前情概要 上文中的RouteHandler中有一个重要方法GetActionDescriptor没有贴代码和说,接下来我们就说一说这个方法. 使用controllerName.actionN ...
- Ionic 2 中生命周期的命名改变及说明
原文发表于我的技术博客 本文简要整理了在 Ionic 2 的版本中生命周期命名的改变,以及各个事件的解释. 原文发表于我的技术博客 在之前的课程中讲解了 Ionic 生命周期的命名以及使用,不过在 I ...
- gerrit代码简单备份方案分享
由于前期部署了gerrit代码审核系统,开发调整后的线上代码都放到gerrit上,这就要求我们要保证代码的安全.所以,对gerrit代码的备份至关重要! 备份的策略是:1)先首次将gerrit项目代码 ...