单击是复选框显示2个表单字段,单击否,保持隐藏这两个字段。我该怎么办?

时间:2012-07-18 15:34:10

标签: html checkbox show hidden

<TR>
<TD VALIGN="top">
<LABEL FOR="disabilities">5. Do you have any disability which may limit your-----------
<BR>
ability to perform the essential functions of the job
<BR>
for which you are applying?<FONT COLOR="#FF0000"><SUP>*</SUP></FONT>
</LABEL>
</TD>
<TD VALIGN="top">
<INPUT TYPE="text" NAME="disabilities"  MAXLENGTH="3" SIZE="6" onFocus="javascript:toggleMsg('msg-23')" onBlur="javascript:toggleMsg('msg-23')" MAXLENGTH="20">
<SPAN ID="msg-23" CLASS="msg" STYLE="visibility:hidden;">Yes or no</SPAN><editcheck="req=Y=Please enter yes or no.">
</TD>
</TR>

<TR>
<TD>&nbsp;</TD>
</TR>

<TR>
<TD VALIGN="top">
<LABEL FOR="ifyes">If yes, describe----------------------------------------------</LABEL>
</TD>
<TD VALIGN="top">
<INPUT TYPE="text" NAME="ifyes" MAXLENGTH="50" SIZE="60" onFocus="javascript:toggleMsg('msg-24')" onBlur="javascript:toggleMsg('msg-24')" MAXLENGTH="20">
<SPAN ID="msg-24" CLASS="msg" STYLE="visibility:hidden;">If no, put N/A.</SPAN><editcheck="req=Y=Please enter descriptions of disabilities.">
</TD>
</TR>

<TR>
<TD VALIGN="top">
<LABEL FOR="accommodate">What can we do to accommodate you?---------------------</LABEL>
</TD>
<TD VALIGN="top">
<INPUT TYPE="text" NAME="accomodate" MAXLENGTH="50" SIZE="60" onFocus="javascript:toggleMsg('msg-25')" onBlur="javascript:toggleMsg('msg-25')" MAXLENGTH="20">
<SPAN ID="msg-25" CLASS="msg" STYLE="visibility:hidden;">If none, type N/A</SPAN><editcheck="req=Y=Please enter accommodations.">
</TD>
</TR>

忽略javascript,因为它还没有工作,并且是另一个问题的一部分,我如何设置它,所以我旁边有一个复选框。单击是,它显示“ifyes”和“容纳”单击否,它不显示它。我怎么做?

1 个答案:

答案 0 :(得分:1)

您需要输入一些javascript才能使其正常工作。我为你准备了一个真正的快速测试。随意修改它以满足您的需求。

的JavaScript     

function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.visibility = 'visible';
    }
    else document.getElementById('ifYes').style.visibility = 'hidden';

}

</script>

HTML

<label for="yesCheck">Yes</label> <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> 
<label for="noCheck">No</label> <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br>
<div id="ifYes" style="visibility:hidden">
    <label for="yes">If yes, explain:</label> 
    <input type='text' id='yes' name='yes'><br>
    <label for="acc">What can we do to accommodate you?</label>  
    <input type='text' id='acc' name='acc'>
</div>

演示 - http://jsfiddle.net/QAaHP/