构思

　　通过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>

转载于:https://www.cnblogs.com/wangyang0210/p/9546159.html

JavaScript实现表单的全选,反选,获取值相关推荐

7.20 Bootstrap、企业黄页2.0、form表单、全选不选反选
Bootstrap.企业黄页2.0.form表单.全选不选反选一.Bootstrap PPT内容 HTML中导入Bootstrap Bootstrap教程网站二.企业黄页2.0 三.form表单 ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
jq 批量删除 php,PHP基础班初学心得：用JQ实现表单的全选、反选、取消和删除功能...
摘要: 本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. ...
layui table 全选过滤_layui表格(表单)的全选功能
最近在使用layui这个框架,其中有用到表格的全选功能,下面记录下我的使用.html文件需要引用的是layui.js和layui.css,但是上面两个文件又会引入其他文件.,如图所示, 所以建议从la ...
layui表格监听全选_layui表格(表单)的全选功能
最近在使用layui这个框架,其中有用到表格的全选功能,下面记录下我的使用.html文件需要引用的是layui.js和layui.css,但是上面两个文件又会引入其他文件.,如图所示, 所以建议从la ...
JavaScript 验证表单不为空和获取select下拉列表的值和文本
1.验证表单不为空 var hasform = { "Name": "名字", "Id_card": &qu ...
表单绑定复选框的值和图片上传
表单如何实现与复选框的值绑定一致 <u-form-item :label-position="labelPosition" label="提供服务" pr ...
html表单的复选框的值,关于表单：HTML复选框的checked属性的正确值是什么？
我们都知道如何在HTML中形成一个复选框输入: 我不知道 - 复选复选框的技术正确值是什么? 我看到这些都有效: 答案是无关紧要的吗? 我没有看到证据证明答案在规范中标记为正确: Checkboxes ...
CheckBox复选框全选以及获取值(转)
原文链接:http://hi.baidu.com/dabaodream/blog/item/c51f5bfaa4a5f71ed8f9fd3d.html 页面代码: <html> <h ...

JavaScript实现表单的全选,反选,获取值

构思

步骤

JavaScript实现表单的全选,反选,获取值相关推荐

最新文章

热门文章