思路:利用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检查是否包含特定值