本篇文章主要给大家介绍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怎么获取复选框选中的值相关推荐

  1. js 获取复选框选中的值

    一 单选框的值 代码: $("input[type='radio']:checked").val() 二 获取多选框的值: 思路:利用name属性值获取checkbox对象,然后循 ...

  2. ajax获取复选框选中的值,获取checkbox中被选中的值

    ~~~ --------------------html部分--------------------------------- 1 2 3 4 5 6 7 8 js jquery ---------- ...

  3. java如何获取复选框选中的值

    前台代码: <form action="" method="get"> 您喜欢的水果?<br /><br /> <la ...

  4. 支付宝小程序获取复选框选中值id,使其显示且可编辑

    问题概述 在做支付宝小程序编辑表单时,需要将用户之前填.选的信息显示出来后再编辑.这里针对复选框选中值的获取显示,通过服务端发送请求后拿到的选中id,显示选中值并且可编辑. axml代码片段 < ...

  5. jq 如何获取多选框选中的值

    jquery如何获取多选框选中的值,有两种方法 1.通过id获取是否选中(单个) 1)引入jquery文件 2)Html设计如下 <div><span>运动类:</spa ...

  6. js,jquery获取复选框checkbox被选中的值

    转载:https://blog.csdn.net/qq_35792598/article/details/76646983 <!DOCTYPE html PUBLIC "-//W3C/ ...

  7. jquery循环复选框选中的值_jquery获取复选框被选中的值

    这篇文章主要介绍了jquery获取复选框被选中的值的方法,需要的朋友可以参考下 JS获取复选框被选中的值 0 1 2 3 4 5 6 7 JS代码 对checkbox的其他几个操作 1. 全选 2. ...

  8. 用jQuery获取复选框选中的当前行的某个字段的值

    <script src="js/jquery.js"></script> <script language="javascript" ...

  9. Jquery获取单选框与复选框选中的值

    html: 单选框-----> <label><input type="radio" name="radio" id="rad ...

最新文章

  1. (2)JavaScript数据类型
  2. vimrc 配置 史上最牛
  3. html怎么加载xml文档,在html中解析xml文件(javascript 读取)
  4. MyBatis之注解开发
  5. 小米路由器添加扩展工具_小米正式发布miVela软件平台,与各方共同合作推进物联网发展...
  6. VTK:标记数据映射器用法实战
  7. 学习c++的优秀博客(转)
  8. JAVA通信编程(三)——TCP通讯
  9. 互联网晚报 | 2月17日 星期四 | 小鹏汽车回应总裁年薪超4亿;B站将上线开播前人脸认证功能;星巴克再次涨价...
  10. cv2作图cv2.polylines,cv2.fillPoly,cv2.fillConvexPoly多边形时需要注意的地方
  11. eix安装_U盘安装原版Windows 8.1
  12. 支持向量机原理(三)线性不可分支持向量机与核函数
  13. 计算机vb小游戏,用vb6.0做一个小游戏
  14. 计算机二进制乘法运算(原码,补码)
  15. 我在蚂蚁金服做后端:那些坚持在一个岗位做八年的人,后来怎么样了?
  16. python定时备份为知笔记数据
  17. 关于测试排期的那些事
  18. 报告显示,疫情降低了人们的财务和社交幸福感
  19. gazebo+rviz中配置UR+robotiq_gripper夹爪,最详细操作过程
  20. 前端 - 博客系统(页面设计)

热门文章

  1. 做程序员一般都需要什么学历?大厂招不招低学历?你想知道的都在这里了
  2. 《玄奘西行》华盛顿上演 美国观众称“美轮美奂”
  3. 全景环视拼接,四路鱼眼摄像头,有个大概样子了
  4. 教程分享 | 如何获取港口网(全球船舶点和路径)的数据
  5. 山东省一流本科课程“Python应用开发”课程中的思政元素
  6. Huffman和Priority_queue 解决POJ 1521
  7. New Bing Something went wrong. Please try again.
  8. sealed密封类的使用
  9. 第十三篇 人生中的第一桶金
  10. 2015年西南交通大学首次招收大数据研究生