style.visibility=visible/hidden 元素隐藏后，元素所占的空间还会留着
style.display=block/none 元素和元素所占的空间都会被隐藏
示例：姓名、性别（男、女）、月收入（只能数字）、男性消费（抽烟、喝酒）、女性消费（化妆品、衣服）；如果选择男性，则出现男性，选择女性，则出现女性
onload事件：页面加载的时候执行，写在body中，在开始时先显示男性及男性消费
onclick事件：被点击的时候执行
- 在打开页面时默认显示男性相关元素
<html>
<head>
<title>这是隐藏表单测试网页</title>
<script type="text/javascript" src="myjs1.js"></script>
<style type="text/css">
#tb
{
border:solid blue 2px;
width:300px
}
</style>
</head>
<body onload="showMale()">
<table id="tb">
<tr><td>姓名：</td><td><input type="text" id="xm" /></td></tr>
<tr><td>性别：</td><td><input type="radio" name="xb" id="nan" />男<input type="radio" name="xb" id="nv" />女</td></tr>
<tr><td>月收入:</td><td><input type="text" id="ysr"/></td></tr>
<tr name="nanhx"><td>抽烟费用：</td><td><input type="text" id="cyfy"/></td></tr>
<tr name="nanhx"><td>喝酒费用：</td><td><input type="text" id="hjfy"/></td></tr>
<tr name="nvhx"><td>化妆品费用：</td><td><input type="text" id="hzpfy"/></td></tr>
<tr name="nvhx"><td>买衣服费用：</td><td><input type="text" id="myffy"/></td></tr>
<tr><td>结余：</td><td><input type="text" id="jy"/></td></tr>
<tr><td colspan="2"><input type="button" value="计算结余" /></td></tr>
</table>
</body>
</html>
function showMale()
{
document.getElementById("nan").checked=true;
for(var i=0;i<document.getElementsByName("nvhx").length;i++) //逐行隐藏女性花销行
{
//document.getElementsByName("nvhx")[i].style.display="none"; 两种方法
document.getElementsByName("nvhx").item(i).style.display="none"; //item第i个元素
}
}
执行结果
- 在选择“女性时”，切换到女性相关元素，并能够进行相应的“结余计算”
html代码：
<html>
<head>
<title>这是隐藏表单测试网页</title>
<script type="text/javascript" src="myjs1.js"></script>
<style type="text/css">
#tb
{
border:solid blue 2px;
width:300px;
}
.first
{
width:100px;
}
</style>
</head>
<body onload="showMale()">
<table id="tb">
<tr><td class="first">姓名：</td><td><input type="text" id="xm" /></td></tr>
<tr><td class="first">性别：</td><td><input type="radio" name="xb" id="nan" onclick="showMale()"; />男<input type="radio" name="xb" id="nv" onclick="showFeMale()"; />女</td></tr>
<tr><td class="first">月收入:</td><td><input type="text" id="ysr"/></td></tr>
<tr name="nanhx"><td class="first">抽烟费用：</td><td><input type="text" id="cyfy"/></td></tr>
<tr name="nanhx"><td class="first">喝酒费用：</td><td><input type="text" id="hjfy"/></td></tr>
<tr name="nvhx"><td class="first">化妆品费用：</td><td><input type="text" id="hzpfy"/></td></tr>
<tr name="nvhx"><td class="first">买衣服费用：</td><td><input type="text" id="myffy"/></td></tr>
<tr><td>结余：</td><td><input type="text" id="jy"/></td></tr>
<tr><td colspan="2"><input type="button" value="计算结余" onclick="compute()"; /></td></tr>
</table>
</body>
</html>
js代码：
function showMale()
{
//隐藏女性花销
document.getElementById("nan").checked=true;
for(var i=0;i<document.getElementsByName("nvhx").length;i++) //逐行隐藏女性花销行
{
//document.getElementsByName("nvhx")[i].style.display="none"; 两种方法
document.getElementsByName("nvhx").item(i).style.display="none"; //item第i个元素
}
//显示男性花销
for(var i=0;i<document.getElementsByName("nanhx").length;i++)
{
document.getElementsByName("nanhx").item(i).style.display="block";
}
}
function showFeMale()
{
//隐藏男性花销
document.getElementById("nv").checked=true;
for(var i=0;i<document.getElementsByName("nanhx").length;i++)
{
document.getElementsByName("nanhx").item(i).style.display="none";
}
//显示女性花销
for(var i=0;i<document.getElementsByName("nvhx").length;i++)
{
document.getElementsByName("nvhx").item(i).style.display="block";
}
}
//在点击结余时，执行onclick，compute方法
function compute()
{
//判断姓名
if(document.getElementById("xm").value.length==0)
{
alert("请输入姓名");
document.getElementById("xm").focus();
return;
}
var lang=/^[\u4e00-\u9fa5]+$/;
if(!lang.test(document.getElementById("xm").value)) //xm姓名与表达式不匹配
{
alert('请输入中文姓名');
document.getElementById("xm").select(); //将输入框选中，方便直接输入中文
return;
}
//判断月收入，必须为数字
str=/^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/;
if(!str.test(document.getElementById("ysr").value))
{
alert('月收入必须是数字');
document.getElementById("ysr").select(); //将输入框选中，方便直接输入中文
return;
}
//判断男、女性花销
if(document.getElementById("nan").checked) //男性被选中，判断男性的抽烟和喝酒费用为数字
{
if(!str.test(document.getElementById("cyfy").value))
{
alert('抽烟费用必须是数字!');
document.getElementById("cyfy").select();
return;
}
if(!str.test(document.getElementById("hjfy").value))
{
alert('喝酒费用必须是数字!');
document.getElementById("hjfy").select();
return;
}
document.getElementById("jy").value=
parseFloat(document.getElementById("ysr").value) -
parseFloat(document.getElementById("cyfy").value) -
parseFloat(document.getElementById("hjfy").value);
}
else//为女性，判断女性的化妆品和衣服费用为数字
{
if(!str.test(document.getElementById("hzpfy").value))
{
alert('化妆品费用必须是数字!');
document.getElementById("hzpfy").select();
return;
}
if(!str.test(document.getElementById("myffy").value))
{
alert('买衣服费用必须是数字!');
document.getElementById("myffy").select();
return;
}
document.getElementById("jy").value=
parseFloat(document.getElementById("ysr").value) -
parseFloat(document.getElementById("hzpfy").value) -
parseFloat(document.getElementById("myffy").value);
}
}
执行结果1
执行结果2
网友评论