Show/Hide div with radio button
Hi guys,
I've looked through the fourms and tried some of the other "Show/Hide div with radio button" responses and I'm not sure if mine is the same and cannot to get it to work.
I basically have a table and when "Other" equals "Yes" it should show "myDiv", if they then select "No" it'll hide it.
By default I have it hidden. The other part I'm stuck with is - if they select "Yes" and type something into my div (which is an open text box) I'm thinking there must be a way to reset the fileld if they change their mind and choose "No".
Thank you in advance!
Here's my HTML code with the table and DIV:
- <!DOCTYPE html>
- <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
- <span class="text-block"><br /></span>
<a class="question-heading" name="A45" id="A45">26. </a><span class="question-text">Early childhood education assessments can serve many different purposes. Below is a list of reasons that assessments are sometimes used. Please indicate which reasons your {Early Learning Coalition/Redwoods Christian Migrant Association/Head Start grantee} uses {Assessment #X}.</span>
<div align="left" class="response-set">
<table id="TQ45" border="1" rules="all" cellspacing="0" cellpadding="3" width="50%">
<colgroup class="topic-col" span="1" width="20%" />
<colgroup id="Q45_A_COLNORM" class="colA" span="2" width="40%" />
<thead>
<tr align="center"><th></th>
<th id="Q45_A_C1" name="Q45_A_C1" class="choice-row">Yes</th>
<th id="Q45_A_C2" name="Q45_A_C2" class="choice-row">No</th>
</tr>
</thead>
<tbody>
<tr id="Q45T1" class="odd-row" align="center"><td nowrap="nowrap" align="left">Diagnostic</td>
<td><input type="radio" name="Q45_A_1" value="1" id="Q45_A_1_1" /></td>
<td><input type="radio" name="Q45_A_1" value="2" id="Q45_A_1_2" /></td>
</tr>
<tr id="Q45T2" class="even-row" align="center"><td nowrap="nowrap" align="left">Screening (e.g., determine service eligibility)</td>
<td><input type="radio" name="Q45_A_2" value="1" id="Q45_A_2_1" /></td>
<td><input type="radio" name="Q45_A_2" value="2" id="Q45_A_2_2" /></td>
</tr>
<tr id="Q45T3" class="odd-row" align="center"><td nowrap="nowrap" align="left">To inform instructional or curricular practices</td>
<td><input type="radio" name="Q45_A_3" value="1" id="Q45_A_3_1" /></td>
<td><input type="radio" name="Q45_A_3" value="2" id="Q45_A_3_2" /></td>
</tr>
<tr id="Q45T4" class="even-row" align="center"><td nowrap="nowrap" align="left">Monitor children's progress</td>
<td><input type="radio" name="Q45_A_4" value="1" id="Q45_A_4_1" /></td>
<td><input type="radio" name="Q45_A_4" value="2" id="Q45_A_4_2" /></td>
</tr>
<tr id="Q45T5" class="odd-row" align="center"><td nowrap="nowrap" align="left">Determine service eligibility</td>
<td><input type="radio" name="Q45_A_5" value="1" id="Q45_A_5_1" /></td>
<td><input type="radio" name="Q45_A_5" value="2" id="Q45_A_5_2" /></td>
</tr>
<tr id="Q45T6" class="even-row" align="center"><td nowrap="nowrap" align="left">Benchmarking</td>
<td><input type="radio" name="Q45_A_6" value="1" id="Q45_A_6_1" /></td>
<td><input type="radio" name="Q45_A_6" value="2" id="Q45_A_6_2" /></td>
</tr>
<tr id="Q45T7" class="odd-row" align="center"><td nowrap="nowrap" align="left">Program evaluation</td>
<td><input type="radio" name="Q45_A_7" value="1" id="Q45_A_7_1" /></td>
<td><input type="radio" name="Q45_A_7" value="2" id="Q45_A_7_2" /></td>
</tr>
<tr id="Q45T8" class="even-row" align="center"><td nowrap="nowrap" align="left">Other</td>
<td><input type="radio" name="Q45_A_8" value="1" id="Q45_A_8_1" /></td>
<td><input type="radio" name="Q45_A_8" value="2" id="Q45_A_8_2" /></td>
</tr>
</tbody>
</table>
</div>
<span class="text-block"><br /><div id="myDiv" style="display: none;"> <br /></span>
<a class="question-heading" name="A46" id="A46">26a. </a><span class="question-text">Please specify.</span>
<div class="response-set">
<table cellspacing="0" cellpadding="0"><tr><td>
<textarea name="Q46" id="Q46" rows="3" cols="62" wrap="virtual"></textarea>
</td></tr>
</table>
</div>
</table>
</div>
- </body>
</html>