思路:利用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检查是否包含特定值
在checkbox加上同样的name属性
直接上代码:
function Lond_ckeck(objname){
obj = document.getElementsByName(objname)
checkval = []
for(k in obj){
if(obj[k].checked)
checkval.push(obj[k].value)
}
return checkval
}
使用方法
效果
HTML代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src='js/Lond.js'></script>
</head>
<body>
<input type="checkbox" name="hell" value="选中1">
<input type="checkbox" name="hell" value="选中2">
<input type="checkbox" name="hell" value="选中3">
<input type="checkbox" name="hell" value="选中4">
<button onclick="fun()">测试</button>
<script type="text/javascript">
function fun(){
alert(Lond_ckeck('hell'))//id)
}
</script>
</body>
</html>
如果上面出错请复制下面HTML代码:
HTML代码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="checkbox" name="hell" value="选中1">
<input type="checkbox" name="hell" value="选中2">
<input type="checkbox" name="hell" value="选中3">
<input type="checkbox" name="hell" value="选中4">
<button onclick="fun()">测试</button>
<script type="text/javascript">
function fun(){
alert(Lond_ckeck('hell'))//id)
}
function Lond_ckeck(objname){
obj = document.getElementsByName(objname)
checkval = []
for(k in obj){
if(obj[k].checked)
checkval.push(obj[k].value)
}
return checkval
}
</script>
</body>
</html>
注意事项: 传入参数一定是name属性。