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

原创于 2017-08-17 15:02:38 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #checkbox #html

javascript 同时被 2 个专栏收录

8 篇文章

订阅专栏

html

2 篇文章

订阅专栏

本文介绍了一种通过JavaScript获取HTML页面上被选中的复选框（checkbox）的方法。利用document.getElementsByName方法结合for循环，可以有效地收集所有指定名称的checkbox元素，并判断其是否被选中，最终将选中的值收集到数组中进行后续处理。

利用name属性值获取checkbox对象，然后循环判断checked属性（true表示被选中，false表示未选中）。

1、HTML结构

<input type="checkbox" name="test" value="1"/><span>1</span> 
<input type="checkbox" name="test" value="2"/><span>2</span> 
<input type="checkbox" name="test" value="3"/><span>3</span> 
<input type="checkbox" name="test" value="4"/><span>4</span> 
<input type="checkbox" name="test" value="5"/><span>5</span> 
<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);
    }
    alert(check_val);
}

3、演示效果

这里写图片描述