这个联动的字段效果怎么实现-求代码

Question

通过元素的 display 属性控制none为不显示
"" 为显示

Answer 1

<dt>类型：</dt>
<dd><label><input type="radio" name="bstype" onclick="a()" />求租/求购</label>
<label><input type="radio"  name="bstype" onclick="b()" />出租/转让</label></dd>
<dt>租让意向：</dt>
<dd><span id="sbstype2"><label><input type="radio" name="rtype" onclick="c()" />出租</label><label><input type="radio" name="rtype" onclick="d()" />转让</label><label><input type="radio" name="rtype" onclick="e()" />出租/出让</label></span><span id="sbstype1"><label><input type="radio" name="rtype" onclick="e()" />求租</label><label><input type="radio" name="rtype" onclick="e()" />求租/求购</label></span>
<span id="sadd"><dt>地址：</dt><dd><input name="add"/></dd></span>
<span id="sprice"><dt>价格：</dt><dd><label><input size="6" name="price" />英镑</label></dd></span>
<span id="srent"><dt>租金：</dt><dd>￡<input size="5" id="rent" name="rent"/>/周 (p/w)</dd></span>
<script language="javascript">
function a() {
document.getElementById("sbstype2").style.display = "none";
document.getElementById("sbstype1").style.display = "";
document.getElementById("sadd").style.display = "none";
}
function b() {
document.getElementById("sbstype1").style.display = "none";
document.getElementById("sbstype2").style.display = "";
document.getElementById("sadd").style.display = "";
}
function c() {
document.getElementById("sprice").style.display = "none";
document.getElementById("srent").style.display = "";
}
function d() {
document.getElementById("srent").style.display = "none";
document.getElementById("sprice").style.display = "";
}
function e() {
document.getElementById("sprice").style.display = "";
document.getElementById("srent").style.display = "";
}
</script>

Answer 2

谢谢, 有个问题, 在FF下面, 地址不会隐藏, 但是在IE下面会, 
也就是a()下的sadd隐藏，在firefox下面不起作用。 这是为什么？

Answer 3

<dt>类型：</dt>
<dd><label><input type="radio" name="bstype" onclick="a()" />求租/求购</label>
<label><input type="radio"  name="bstype" onclick="b()" />出租/转让</label></dd>
<dt>租让意向：</dt>
<dd><span id="sbstype2"><label><input type="radio" name="rtype" onclick="c()" />出租</label><label><input type="radio" name="rtype" onclick="d()" />转让</label><label><input type="radio" name="rtype" onclick="e()" />出租/出让</label></span><span id="sbstype1"><label><input type="radio" name="rtype" onclick="e()" />求租</label><label><input type="radio" name="rtype" onclick="e()" />求租/求购</label></span></dd>
<span id="sadd" style="display:none"><dt>地址：</dt><dd><input name="addr"/></dd></span>
<span id="sprice"><dt>价格：</dt><dd><label><input size="6" name="price" />英镑</label></dd></span>
<span id="srent"><dt>租金：</dt><dd>￡<input size="5" id="rent" name="rent"/>/周 (p/w)</dd></span>
<script language="javascript">
function a() {
    document.getElementById("sbstype2").style.display = "none";
    document.getElementById("sbstype1").style.display = "";
    document.getElementById("sadd").style.display = "none";
}
function b() {
    document.getElementById("sbstype1").style.display = "none";
    document.getElementById("sbstype2").style.display = "";
    document.getElementById("sadd").style.display = "";
}
function c() {
    document.getElementById("sprice").style.display = "none";
    document.getElementById("srent").style.display = "";
}
function d() {
    document.getElementById("srent").style.display = "none";
    document.getElementById("sprice").style.display = "";
}
function e() {
    document.getElementById("sprice").style.display = "";
    document.getElementById("srent").style.display = "";
}
</script>

Answer 4

<dt>类型：</dt>
<dd><label><input type="radio" name="bstype" onclick="a()" />求租/求购</label>
<label><input type="radio"  name="bstype" onclick="b()" />出租/转让</label></dd>
<dt>租让意向：</dt>
<dd><span id="sbstype2"><label><input type="radio" name="rtype" onclick="return c()" />出租</label><label><input type="radio" name="rtype" onclick="return d()" />转让</label><label><input type="radio" name="rtype" onclick="return e()" />出租/出让</label></span><span id="sbstype1"><label><input type="radio" name="rtype" onclick="return e()" />求租</label><label><input type="radio" name="rtype" onclick="return e()" />求租/求购</label></span></dd>
<span id="sadd" style="display:none"><dt>地址：</dt><dd><input name="addr"/></dd></span>
<span id="sprice"><dt>价格：</dt><dd><label><input size="6" name="price" />英镑</label></dd></span>
<span id="srent"><dt>租金：</dt><dd>￡<input size="5" id="rent" name="rent"/>/周 (p/w)</dd></span>
<script language="javascript">
function a() {
    document.getElementById("sbstype2").style.display = "none";
    document.getElementById("sbstype1").style.display = "";
    document.getElementById("sadd").style.display = "none";
}
function b() {
    document.getElementById("sbstype1").style.display = "none";
    document.getElementById("sbstype2").style.display = "";
    document.getElementById("sadd").style.display = "";
}
function c() {
    if (!f()) return false;
    document.getElementById("sprice").style.display = "none";
    document.getElementById("srent").style.display = "";
}
function d() {
    if (!f()) return false;
    document.getElementById("srent").style.display = "none";
    document.getElementById("sprice").style.display = "";
}
function e() {
    if (!f()) return false;
    document.getElementById("sprice").style.display = "";
    document.getElementById("srent").style.display = "";
}
function f() {
    var bstype = document.getElementsByName("bstype");
    for(var i = 0; i < bstype.length; i++) {
if (bstype[i].checked) return true;
    }
    alert("请先选择类型");
    return false;
}
</script>