<form name="formTest" action="#">
<input type="checkbox" id="w1" name="box" value="0" />男
<input type="checkbox" id="w2" name="box" value="0" />女
<input type="checkbox" id="w3" name="box" value="0" />外乡人</br>
<input type="button" value="ok" onclick="w1.checked='checked';w2.checked='checked';w3.checked='checked'"/>
简单的按一个键,所有的check都被选中.
下面的这个是关于表单验证的一个作业.需要分析:就是在一个TEXT聚焦的时候,就会在旁边显示一排字告诉你里面内容必须不为空,并且要大于或者等于8位.当你输入的内容符合要求的时候,该行字就自动小时.我算是基本实现了功能了,但是不完善.因为当我输入9个字的时候,字并不是自动小时的,而是需要我再一次的聚焦..如果那位达人能帮忙解决下,俺感激不尽..
代码如下:
<!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" lang="en">
<head>
<!-- Created by TopStyle Pro Trial Version - www.bradsoft.com -->
<title></title>
<style>
div
{
color: red;
font-size: 13px;
}
</style>
<script>
function tixing()
{
var divObject = document.getElementById("div1");
var text= document.getElementById("t1");
if(text.value.length >=8)
{
divObject.innerHTML = "您输入的用户名必须在0-8位之间。";
divObject.style.display = "none";
}
else
{
divObject.innerHTML = "您输入的用户名必须在0-8位之间。";
divObject.style.display = "";
}
}
function tixing1()
{
var divObject1 = document.getElementById("div2");
var text2= document.getElementById("t2");
if(text2.value.length >=8)
{
divObject1.innerHTML = "您输入的用户名必须在0-8位之间。";
divObject1.style.display = "none";
}
else
{
divObject1.innerHTML = "您输入的用户名必须在0-8位之间。";
divObject1.style.display = "";
}
}
function validate()
{
var te1 = document.getElementById("t1")
var te2 = document.getElementById("t2")
var divObject = div1;
var divObject1 = div2;
if(te1.value.length < 8)
{
divObject.innerHTML = "您输入的用户名必须在0-8位之间。";
divObject.style.display = "";
}
if(te2.value.length < 8)
{
divObject1.innerHTML = "您输入的密码必须在0-8位之间"
divObject1.style.display = "";
}
if(te1.value.length < 8 && te2.value.length < 8)
{
divObject.innerHTML = "您输入的用户名必须在0-8位之间。";
divObject1.innerHTML = "您输入的密码必须在0-8位之间"
divObject.style.display = "";
divObject1.style.display = "";
}
}
</script>
</head>
<body>
<form id="formTest">
用户名
<input type="text" id="t1" onfocus="tixing();"/><br /><div id="div1" ></div>
密 码
<input type="password" id="t2" onfocus="tixing1()" /><br /><div id="div2"></div>
<input type="button" id="bt1" value="登录" onclick="validate()"/>
</form>
</body>
</html>
再下面的这个是今天的作业.
<!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" lang="en">
<head>
<!-- Created by TopStyle Pro Trial Version - www.bradsoft.com -->
<title></title>
<style>
div
{
float: left;
}
</style>
<script>
function a()
{
var textId0 = document.getElementById("te1");
var text0 = textId0.value;
var areId = document.getElementById("text");
areId.value = areId.value+"1."+"用户名:"+text0+"\n";
}
function b()
{
var textId1 = document.getElementById("pa");
var text1 = textId1.value;
var areId = document.getElementById("text");
areId.value =areId.value+"3."+"密码:"+text1+"\n";
}
function c()
{
var radioId1 = document.getElementById("ra1");
var radio1 = radioId1.value;
var areId = document.getElementById("text");
areId.value =areId.value+"4."+"单选:"+radio1+"\n";
}
function d()
{
var radioId2 = document.getElementById("ra2");
var radio2 = radioId2.value;
var areId = document.getElementById("text");
areId.value =areId.value+"4."+"单选:"+radio2+"\n";
}
function ei()
{
var radioId3= document.getElementById("ra3");
var radio3 = radioId3.value;
var areId = document.getElementById("text");
areId.value =areId.value+"4."+"单选:"+radio3+"\n";
}
function f()
{
var checkId1= document.getElementById("che1");
var check1 = checkId1.value;
var areId = document.getElementById("text");
areId.value =areId.value+"5."+"多选:"+check1+"\n";
}
function g()
{
var checkId2= document.getElementById("che2");
var check2 = checkId2.value;
var areId = document.getElementById("text");
areId.value =areId.value+"5."+"多选:"+check2+"\n";
}
function h()
{
var checkId3= document.getElementById("che3");
var check3 = checkId3.value;
var areId = document.getElementById("text");
areId.value =areId.value+"5."+"多选:"+check3+"\n";
}
function select()
{
var a = document.getElementById("selectId");
var b = a.options[a.selectedIndex];
var c = b.value;
var areId = document.getElementById("text");
areId.value = areId.value+c;
}
</script>
</head>
<body>
<div>
用户名:<input type="text" id="te1" onblur="a()"/><br/>
密  码:<input type="password" id="pa" onblur="b();"/><br />
<a>
<input type="radio" value="吃饭" id="ra1" name="1" onblur="c();"/>吃饭
<input type="radio" value="睡觉" id="ra2" name="1" onblur="d();"/>睡觉
<input type="radio" value="上学" id="ra3" name="1" onblur="ei();"/>上学
</a><br />
<a>
<input type="checkbox" id="che1" value="巷巷" onblur="f()"/>巷巷
<input type="checkbox" id="che2" value="街道" onblur="g()"/>街道
<input type="checkbox" id="che3" value="边边" onblur="h()"/>边边
</a><br />
<textarea id="text" cols="20" rows="6"></textarea>
</div>
<form id="selectId0">
<select id="selectId" onblur="select()"; / >
<option value="东东">东东 </option>
<option value="南南">南南</option>
<option value="西西">西西 </option>
<option value="北北">北北 </option>
</select>
</form>
</body>
</html>
还是不完善..哎..