Javascript复选框特效

判断选择复选框的个数
<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/>
&nbsp;&nbsp;&nbsp
<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>

    A+
发布日期:2010年03月07日  所属分类:未分类

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: