js怎么获取复选框选中的值
本篇文章主要给大家介绍js获取复选框选中的值的实现方法。
js获取复选框选中的值的方法实现,对于新手小白来说可能有一定的难度。
下面我们就结合具体的代码示例为大家详细介绍js实现获取复选框中选中的值的方法。
打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)
代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="checkbox" name="test" value="0"/>0
<input type="checkbox" name="test" value="1"/>1
<input type="checkbox" name="test" value="2"/>2
<input type="checkbox" name="test" value="3"/>3
<input type="checkbox" name="test" value="4"/>4
<input type="checkbox" name="test" value="5"/>5
<input type="checkbox" name="test" value="6"/>6
<input type="checkbox" name="test" value="7"/>7
<input type="button" onclick="jqchk()" value="提 交"/>
</body>
<script>function chk() {var obj = document.getElementsByName('test');console.log(obj);var s = '';for (var i = 0; i < obj.length; i++) {if (obj[i].checked) s += obj[i].value + ',';}alert(s == '' ? '你还没有选择任何内容!' : s);}
</script>
</html>
当我们选中多个选项并点击提交时,结果如下图所示:
如图,当点击提交时,浏览器就会提示一个弹窗,并且弹窗中的内容就是我们获取到的复选框中选中的值。
在上述代码中,我们给input提交按钮添加了一个点击事件chk()。在chk()中,我们首先用getElementsByTagName方法获取所有name为test的input并且赋值于一个对象obj。然后定义一个变量s,再对所有的input框进行for循环,判断遍历出被选中的值。
注:我们可以通过前台检查元素,查看值是否是选中状态。check为true则表示选中的项,check为false则表示未被选中的项。
本篇文章就是关于js获取复选框选中的值的方法介绍,其实实现思路也是非常清晰易懂的,希望本文的介绍对需要的朋友有所帮助!
更多内容请关注我或者点开链接,记得点赞哦。
js怎么获取复选框选中的值相关推荐
- js 获取复选框选中的值
一 单选框的值 代码: $("input[type='radio']:checked").val() 二 获取多选框的值: 思路:利用name属性值获取checkbox对象,然后循 ...
- ajax获取复选框选中的值,获取checkbox中被选中的值
~~~ --------------------html部分--------------------------------- 1 2 3 4 5 6 7 8 js jquery ---------- ...
- java如何获取复选框选中的值
前台代码: <form action="" method="get"> 您喜欢的水果?<br /><br /> <la ...
- 支付宝小程序获取复选框选中值id,使其显示且可编辑
问题概述 在做支付宝小程序编辑表单时,需要将用户之前填.选的信息显示出来后再编辑.这里针对复选框选中值的获取显示,通过服务端发送请求后拿到的选中id,显示选中值并且可编辑. axml代码片段 < ...
- jq 如何获取多选框选中的值
jquery如何获取多选框选中的值,有两种方法 1.通过id获取是否选中(单个) 1)引入jquery文件 2)Html设计如下 <div><span>运动类:</spa ...
- js,jquery获取复选框checkbox被选中的值
转载:https://blog.csdn.net/qq_35792598/article/details/76646983 <!DOCTYPE html PUBLIC "-//W3C/ ...
- jquery循环复选框选中的值_jquery获取复选框被选中的值
这篇文章主要介绍了jquery获取复选框被选中的值的方法,需要的朋友可以参考下 JS获取复选框被选中的值 0 1 2 3 4 5 6 7 JS代码 对checkbox的其他几个操作 1. 全选 2. ...
- 用jQuery获取复选框选中的当前行的某个字段的值
<script src="js/jquery.js"></script> <script language="javascript" ...
- Jquery获取单选框与复选框选中的值
html: 单选框-----> <label><input type="radio" name="radio" id="rad ...
最新文章
- (2)JavaScript数据类型
- vimrc 配置 史上最牛
- html怎么加载xml文档,在html中解析xml文件(javascript 读取)
- MyBatis之注解开发
- 小米路由器添加扩展工具_小米正式发布miVela软件平台,与各方共同合作推进物联网发展...
- VTK:标记数据映射器用法实战
- 学习c++的优秀博客(转)
- JAVA通信编程(三)——TCP通讯
- 互联网晚报 | 2月17日 星期四 | 小鹏汽车回应总裁年薪超4亿;B站将上线开播前人脸认证功能;星巴克再次涨价...
- cv2作图cv2.polylines,cv2.fillPoly,cv2.fillConvexPoly多边形时需要注意的地方
- eix安装_U盘安装原版Windows 8.1
- 支持向量机原理(三)线性不可分支持向量机与核函数
- 计算机vb小游戏,用vb6.0做一个小游戏
- 计算机二进制乘法运算(原码,补码)
- 我在蚂蚁金服做后端:那些坚持在一个岗位做八年的人,后来怎么样了?
- python定时备份为知笔记数据
- 关于测试排期的那些事
- 报告显示,疫情降低了人们的财务和社交幸福感
- gazebo+rviz中配置UR+robotiq_gripper夹爪,最详细操作过程
- 前端 - 博客系统(页面设计)
热门文章
- 做程序员一般都需要什么学历?大厂招不招低学历?你想知道的都在这里了
- 《玄奘西行》华盛顿上演 美国观众称“美轮美奂”
- 全景环视拼接,四路鱼眼摄像头,有个大概样子了
- 教程分享 | 如何获取港口网(全球船舶点和路径)的数据
- 山东省一流本科课程“Python应用开发”课程中的思政元素
- Huffman和Priority_queue 解决POJ 1521
- New Bing Something went wrong. Please try again.
- sealed密封类的使用
- 第十三篇 人生中的第一桶金
- 2015年西南交通大学首次招收大数据研究生