思路:首先利用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、演示效果
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function f1() {
//获取所有name为chk的多选框,返回一个多选框数组
var chks = document.form.chk
//把选中的多选框的值拼接成字符串
var str = ""
//循环多选框数组
for (var i = 0 i < chks.length i++) {
//如果多选框被选中,则把值累计到str中
if (chks[i].checked == true) {
str += chks[i].value + ","
}
}
//弹出多选框选中的结果
alert("您勾选的值是:"+str)
}
</script>
</head>
<body>
<form name="form">
<input type=checkbox name="chk" value=1>
<input type=checkbox name="chk" value=2>
<input type=checkbox name="chk" value=3>
<input type="button" value="测试" onclick="f1()"/>
</form>
</body>
</html>