我对JavaScript没有经验,所以如果这看起来很简单,我会道歉。我有一个带有4个单选按钮的表单,每个选项都有其他相应的字段。加载表单时,附加字段将被隐藏,并且只应在选择了正确的单选按钮时显示。我能够正确显示字段,但是,当选择了不同的单选按钮时,无法让它们隐藏。我查看了类似问题的其他帖子,但找不到任何有效的方法。任何帮助将不胜感激!
XSL代码:
<input type="radio" name=rdoRequestType" id="mvrRequest" value='MVR"
onclick="saveRadioButton('MVR', 'abcRequestType');showOptions();">
<xsl:if test="$RequestType = 'MVR'">
<xsl:attribute name="checked">true</xsl:attribute>
</xsl:if>
</input>
<input type="radio" name=rdoRequestType" id="mocRequest" value='MOC"
onclick="saveRadioButton('MOC', 'abcRequestType');showOptions();">
<xsl:if test="$RequestType = 'MOC'">
<xsl:attribute name="checked">true</xsl:attribute>
</xsl:if>
</input>
<input type="radio" name=rdoRequestType" id="mtcRequest" value='MTC"
onclick="saveRadioButton('MTC', 'abcRequestType');showOptions();">
<xsl:if test="$RequestType = 'MTC'">
<xsl:attribute name="checked">true</xsl:attribute>
</xsl:if>
</input>
<input type="radio" name=rdoRequestType" id="ltuRequest" value='LTU"
onclick="saveRadioButton('LTU', 'abcRequestType');showOptions();">
<xsl:if test="$RequestType = 'LTU'">
<xsl:attribute name="checked">true</xsl:attribute>
</xsl:if>
</input>
<div id='MVR' style="display:none">
<p>Additional text 1</p>
</div>
<div id='MOC' style="display:none">
<p>Additional text 2</p>
</div>
<div id='MTC' style="display:none">
<p>Additional text 3</p>
</div>
<div id='LTU' style="display:none">
<p>Additional text 4</p>
</div>
我将以下内容作为外部JavaScript文件:
function showOptions()
{
if (document.getElementById('mvrRequest').checked)
{
document.getElementById('MVR').style.display = 'block';
document.getElementById('MOC').style.display = "none";
document.getElementById('MTC').style.display = "none";
document.getElementById('LTU').style.display = "none";
}
else if (document.getElementById('mocRequest').checked)
{
document.getElementById('MOC').style.display = 'block';
document.getElementById('MVR').style.display = "none";
document.getElementById('MTC').style.display = "none";
document.getElementById('LTU').style.display = "none";
}
else if (document.getElementById('mtcRequest').checked)
{
document.getElementById('MTC').style.display = 'block';
document.getElementById('MVR').style.display = "none";
document.getElementById('MOC').style.display = "none";
document.getElementById('LTU').style.display = "none";
}
else if (document.getElementById('ltuRequest').checked)
{
document.getElementById('LTU').style.display = 'block';
document.getElementById('MVR').style.display = "none";
document.getElementById('MOC').style.display = "none";
document.getElementById('MTC').style.display = "none";
}
}