Javascript复选框特效
发布时间：2010-03-07 19:26:48 作者：admin 阅读：942次判断选择复选框的个数
<script language="javascript">
function chkbox(elm)
{var obj=document.getElementsByName("cbox");
var num=0;
for (i=0;i<obj.length ;i++ )
if (obj[i].checked )
num+=1;
if (num>2)
{alert("最多可以选择两个！");
elm.status=false;
}
}
</script>
<input type="checkbox" name="cbox" value=1a onclick="chkbox(this);">
<input type="checkbox" name="cbox" value=2dd onclick="chkbox(this);">
<input type="checkbox" name="cbox" value=3se onclick="chkbox(this);">
<input type="checkbox" name="cbox" value=dad onclick="chkbox(this);">
显示被选中的文本框的个数
<form name=f1>
<input name=t1 type=text>
<input name=c1 type=checkbox value="aa1" onclick="javascript:if(c1.checked)
{f1.t1.value=this.value;f1.t1.focus()}">
</form>
<input type=checkbox name=chk onClick=showmail("数据d");>
<span id="mailarea"></span>
<script>
function showmail(mailstr)
{
mailarea.innerText = mailstr;
}
</script>
选择复选框后显示个数
<script language="javascript">
function a()
{
var obj=document.getElementsByName("chk");
var num=0;
for (i=0;i<obj.length ;i++ )
if (obj[i].checked )
num+=1;
if(num==1){
span1.innerText="稀客,详细介绍下！"
}
else
{
span1.innerText=num +"位,不介绍了,人太多了!";
}
}
</script>
<input type=checkbox value=1 name=chk onclick=a()>
<input type=checkbox value=2 name=chk onclick=a()>
<input type=checkbox value=3 name=chk onclick=a()>
<input type=checkbox value=4 name=chk onclick=a()>
<input type=checkbox value=5 name=chk onclick=a()>
<span id="span1"></span>
全选
<script language="javascript">
function sel(a){
o=document.getElementsByName(a)
for(i=0;i<o.length;i++)
o[i].checked=event.srcElement.checked
}
</script>
<input type=checkbox name=chk1>
<input type=checkbox name=chk1>
<br/>
 
<input type=checkbox onclick=sel('chk1')>
复选框是否选择了
<script language="javascript">
function check()
{
len = document.myform.elements.length-1;
for(i=0,num=0;i<len;i++)
{
if(document.myform.elements[i].checked)
{num++;}
}
if(num>0)
return true;
else
{
alert("请选择");
return false;
}
}
</script>
<form name="myform">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="submit" value=go onclick="return check()">
</form>
复选框综合
<script language="javascript">
function check()
{
var obj=document.getElementsByName("chk");
var num=0;
for (i=0;i<obj.length ;i++ )
if (obj[i].checked )
num+=1;
if(num>0)
return true;
else
{
alert("请选择");
return false;
}
}
</script>
<form name=form1 method=post action="a.asp" onsubmit="javascript:return check();">
<input type=checkbox value=1 name=chk onclick=a()>
<input type=checkbox value=2 name=chk onclick=a()>
<input type=checkbox value=3 name=chk onclick=a()>
<input type=checkbox value=4 name=chk onclick=a()>
<input type=checkbox value=5 name=chk onclick=a()>
<span id="span1"></span>
<script>
function a()
{
var obj=document.getElementsByName("chk");
var num=0;
for (i=0;i<obj.length ;i++ )
if (obj[i].checked )
num+=1;
if(num==1){
span1.innerText="稀客,详细介绍下！"
}
else if(num>1)
{
span1.innerText=num +"位,不介绍了,人太多了!";
}
else
{
span1.innerText=""
}
}
</script>
<br>
<br>
<input type=submit value=删除>
</form>
变颜色字体
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">
<!--
.div1{
border-bottom:1px dashed #999999;
}
-->
</style>
<script>
function changecolor(){
i=document.form1.colors.selectedIndex
value=document.form1.colors.options[i].value
//document.bgColor=value
div1.style.color=document.form1.colors.options[i].value
if(i!=4){
div1.style.borderColor=document.form1.colors.options[i+1].value
}
else{
div1.style.borderColor="red"
}
}
function changesize(){
i=document.form1.sizes.selectedIndex
value=document.form1.sizes.options[i].value
div1.style.fontSize=document.form1.sizes.options[i].value
}
</script>
<body>
<form name="form1" action="" method="post">
<select name="colors" onchange="changecolor()">
<option value="0">请选择颜色:</option>
<option value="#CCCCCC">灰色</option>
<option value="blue">蓝色</option>
<option value="purple">紫色</option>
<option value="green">绿色</option>
</select>
<select name="sizes" onchange="changesize()">
<option value="0">请选择颜色:</option>
<option value="12px">12px</option>
<option value="16px">14px</option>
<option value="18px">16px</option>
<option value="20px">18px</option>
</select>
</form>
<div id="div1" class="div1">
这是一篇文章的内容
</div>
</body>
</html>
如有问题，可以QQ搜索群1028468525加入群聊，欢迎一起研究技术
转载请注明：Javascript复选框特效 出自老鄢博客 | 欢迎分享