例.对多选框进行操作,输出选中的多选框的个数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GB2312"/>
<title></title>
<script type="text/javascript">
/*
* 步骤:
* 1.新建一个空数组
* 2.获取name为“check”的多选款
* 3.循环判断多选框是否被选中,如果被选中则添加到数组里
* 4.获取输出按钮,然后为按钮添加onclick事件,输出数组的长度
* */
window.onload = function () {
//获取ID为btn的元素
var btn = document.getElementById("btn");
//给元素添加onclick事件
btn.onclick = function () {
//新建一个空数组
var arrays = new Array();
//获取name为check的一组元素
var items = document.getElementsByName("check");
//循环这组数组
for (i = 0; i < items.length; i++) {
//判断是否选中
if (items[i].checked) {
//把符合条件的数组添加到数组中
arrays.push(items[i].value);
}
}
alert("选中的个数为:" + arrays.length);
}
}
</script>
</head>
<body>
<form method="post" action="#">
<input type="checkbox" value="1" name="check" checked="checked"/>
<input type="checkbox" value="2" name="check"/>
<input type="checkbox" value="3" name="check" checked="checked"/>
<input type="button" value="你选中的个数" id="btn"/>
</form>
</body>
</html>

posted @ 2012-05-03 11:39  dsfderek  阅读(356)  评论(0编辑  收藏  举报