使用JavaScript实现checkbox复选
这个问题在在管理信息系统中我们经常会遇到,我以前做的程序都是使用后台代码来获得用户的选择项,为了提高页面效率,使用JavaScript会更好一些。
下面是javascript写的一个函数:
在页面上定义了三个checkbox控件,如下:
下面是javascript写的一个函数:
<script language="JavaScript" type="text/javascript">
function btn_Check_onclick()
{
var myElement;
var numberOfControls=document.form1.length;
var compSpec="Your chosen language is ";
for(var i=0;i<numberOfControls;i++)
{
myElement=document.form1[i];
if(myElement.type=="checkbox")
{
if(myElement.checked==true)
{
compSpec+=myElement.value+" ";
}
}
}
alert(compSpec);
}
</script>
function btn_Check_onclick()
{
var myElement;
var numberOfControls=document.form1.length;
var compSpec="Your chosen language is ";
for(var i=0;i<numberOfControls;i++)
{
myElement=document.form1[i];
if(myElement.type=="checkbox")
{
if(myElement.checked==true)
{
compSpec+=myElement.value+" ";
}
}
}
alert(compSpec);
}
</script>
在页面上定义了三个checkbox控件,如下:
<html>
<head>
</head>
<body>
<form name="form1">
<div>
<h1>Please choice your language:</h1>
<br/>
<p>
<table>
<tr>
<td>Java</td>
<td><input type="checkbox" name="chk_Java" value="Java"></td>
</tr>
<tr>
<td>C#</td>
<td><input type="checkbox" name="chk_c#" value="cSharp"></td>
</tr>
<tr>
<td>Python</td>
<td><input type="checkbox" name="chk_Python" value="Python"></td>
</tr>
<tr>
<td><input type="button" name="btn_Check" value="Sub_Check" onclick="return btn_Check_onclick()"></td>
</tr>
</table>
</p>
</div>
</form>
</body>
</html>
<head>
</head>
<body>
<form name="form1">
<div>
<h1>Please choice your language:</h1>
<br/>
<p>
<table>
<tr>
<td>Java</td>
<td><input type="checkbox" name="chk_Java" value="Java"></td>
</tr>
<tr>
<td>C#</td>
<td><input type="checkbox" name="chk_c#" value="cSharp"></td>
</tr>
<tr>
<td>Python</td>
<td><input type="checkbox" name="chk_Python" value="Python"></td>
</tr>
<tr>
<td><input type="button" name="btn_Check" value="Sub_Check" onclick="return btn_Check_onclick()"></td>
</tr>
</table>
</p>
</div>
</form>
</body>
</html>
从中我们可以看出,btn_Check_onclick()的工作原理就是在“from”这个数组中逐个判断页面元素,是不是“checkbox”类型的,如果是,则进一步判断checkbox元素是否被选中。