在js中怎样获得checkbox里选中的多个值?

在js中怎样获得checkbox里选中的多个值?

https://zhidao.baidu.com/question/203897221.html

思路:利用name属性值获取checkbox对象,然后循环判断checked属性(true表示被选中,false表示未选中)。下面进行实例演示:

1、HTML结构

<</code>input type="checkbox" name="test" value="1"/><</code>span>1</</code>span>
<</code>input type="checkbox" name="test" value="2"/><</code>span>2</</code>span>
<</code>input type="checkbox" name="test" value="3"/><</code>span>3</</code>span>
<</code>input type="checkbox" name="test" value="4"/><</code>span>4</</code>span>
<</code>input type="checkbox" name="test" value="5"/><</code>span>5</</code>span>
<</code>input type='button' value='提交' onclick="fun()"/>

2、javascript代码

function 
fun(){
    
obj = document.getElementsByName(
"test"
);
    
check_val = [];
    
for
(k 
in 
obj){
        
if
(obj[k].checked)
            
check_val.push(obj[k].value);
    
}
    
;
}

3、演示效果

在js中怎样获得checkbox里选中的多个值?

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/113997.html原文链接:https://javaforall.net

(0)
上一篇 2021年10月7日 下午3:00
下一篇 2021年10月7日 下午4:00


相关推荐

  • 谷歌最强生图模型来了!NanoBanana新功能详解+使用入口

    谷歌最强生图模型来了!NanoBanana新功能详解+使用入口

    2026年3月14日
    2
  • uwsgi php,Nginx+uWSGI[通俗易懂]

    uwsgi php,Nginx+uWSGI[通俗易懂]基于python的web项目,常见的部署方法有:fcgi:用spawn-fcgi或者框架自带的工具对各个project分别生成监听进程,然后和http服务互动。wsgi:利用http服务的mod_wsgi模块来跑各个project。不过还有个uwsgi,它既不用wsgi协议也不用fcgi协议,而是自创了一个uwsgi的协议,据作者说该协议大约是fcgi协议的10倍那么快。uWSGI的主要特点如下:…

    2025年10月29日
    3
  • 前端语言的发展[通俗易懂]

    前端语言的发展[通俗易懂]本文转自自阮一峰的个人博客什么是前端?维基百科是这样说的:前端(front-end)和后端(back-end)是描述进程开始和结束的通用词汇。前端作用于采集输入信息,后端进行处理。计算机程序的界面

    2022年8月4日
    12
  • 设备树 dtb结构

    设备树 dtb结构dtb 结构由一个小的报头和三个大小可变的部分组成 内存预留块 结构块和字符串块 这些应该按这个顺序出现在扁平的设备树中 因此 设备树结构作为一个整体 当以地址载入内存时 将类似于下图的图 较低的地址位于图的顶部 注 内存预留块可能不存在 尽管在某些情况下可能需要它们来满足单个块的对齐约束 自格式的原始定义以来 已经定义了几种扁平设备树结构的版本 报头中的字段给出了版本 以便客户端程序可以确定设备树是否以兼容的格式编码 本文档仅描述 17 版的格式 兼容 DTSpec 的引导程

    2025年6月22日
    4
  • @MapperScan注解使用

    @MapperScan注解使用1、@Mapper注解:作用:在接口类上添加了@Mapper,在编译之后会生成相应的接口实现类添加位置:接口类上面@MapperpublicinterfaceUserDAO{  //代码}如果想要每个接口都要变成实现类,那么需要在每个接口类上加上@Mapper注解,比较麻烦,解决这个问题用@MapperScan2、@MapperScan作用:指定要变成实现类的接口所…

    2022年6月14日
    236
  • 3042b什么意思_XC3042

    3042b什么意思_XC3042Loj #3042. 「ZJOI2019」麻将

    2022年4月22日
    43

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号