在js中怎么获取checkbox

JavaScript05

在js中怎么获取checkbox,第1张

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

1、HTML结构

1<input type="checkbox" name="test" value="1"/><span>1</span>

2<input type="checkbox" name="test" value="2"/><span>2</span>

3<input type="checkbox" name="test" value="3"/><span>3</span>

4<input type="checkbox" name="test" value="4"/><span>4</span>

5<input type="checkbox" name="test" value="5"/><span>5</span>

6<input type='button' value='提交' onclick="fun()"/>

2、javascript代码

1function fun(){

2    obj = document.getElementsByName("test")

3    check_val = []

4    for(k in obj){

5        if(obj[k].checked)

6            check_val.push(obj[k].value)

7    }

8    alert(check_val)

9}

3、演示效果

2.根据type="checkbox"选中所有checkbox

3.修改checkbox选中状态

4.获取checkbox的value

5.一个简单的表格全选框功能实现

注:

1)通过document.querySelectorAll()获得的NodeList类型,要使用for of进行遍历,使用for in会访问到队形自定义的properties

2)classList对应的DOMTokenList类型使用contains检查是否包含特定值