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.方便 ...
随机推荐
- C#中当程序的访问权限不足时，Directory.Exists和File.Exists方法不会抛出异常报错
有些时候,我们开发的C#应用程序的执行账号,可能没有对一些文件夹和文件的访问权限,当我们使用Directory.Exists和File.Exists方法去判断这些文件夹和文件是否存在的时候,Direc ...
- url 传递中文参数乱码问题的终极解决方法。
估计很多人在做web开发的时候,都会碰到过url传递中文参数,有时候会出现乱码的问题,但有些项目或者环境,又不会有问题.当遇到乱码的时候,上网找了很多解决方案,比如: 页面设置它的编码方式,改成utf ...
- C# 百度TTS，文本转语音，RestAPI之Get请求
因为用得到,所以作个记录: 代码如下: public class BaiduTTSService : IBaiduTTSService { public string tok = GetBaiduTo ...
- 一次Java内存泄漏调试的有趣经历
人人都会犯错,但一些错误是如此的荒谬,我想不通怎么会有人犯这种错误.更没想到的是,这种事竟发生在了我们身上.当然,这种东西只有事后才能发现真相.接下来,我将讲述一系列最近在我们一个应用上犯过的这种错误 ...
- Python 学习 第七篇：函数1（定义、调用和变量的作用域）
函数是把一些语句集合在一起的程序结构,用于把复杂的流程细分成不同的组件,能够减少代码的冗余.代码的复用和修改代码的代价. 函数可以0个.1个或多个参数,向函数传递参数,可以控制函数的流程.函数还可以返 ...
- 使用canvas实现一个圆球的触壁反弹
HTML <canvas id="canvas" width="500" height="500" style="borde ...
- Haproxy+Keepalived高可用环境部署梳理（主主和主从模式）
Nginx.LVS.HAProxy 是目前使用最广泛的三种负载均衡软件,本人都在多个项目中实施过,通常会结合Keepalive做健康检查,实现故障转移的高可用功能. 1)在四层(tcp)实现负载均衡的 ...
- 接口(interface)与多态
1. 接口(interface)是抽象方法与常量值的集合: 2. 从本质上来讲,接口是一种特殊的抽象类,这种抽象类中只包含常量与方法的定义,而没有变量和方法的实现: 3. 接口中声明的属性默认为:pu ...
- JavaScript使用childNodes和children
childNodes用来获取一个元素的所有子元素,这个包括元素节点和文本节点. children用来获取一个元素的子元素节点,注意只是元素节点 其中DOM中常见的三种节点分别如下: 元素节点:< ...
- 牛客OI周赛7-普及组
https://ac.nowcoder.com/acm/contest/372#question A.救救猫咪 #include <bits/stdc++.h> using namespa ...