Show/hide with a reset event

Show/hide with a reset event

Hi guys,

I'm trying to reset/clear out a response if you change your mind on a show/hide div.

You would choose "Yes" to "Other" in the table, type some text into the now shown essay box, but when you choose "No" on "Other" it should clear the text out of the essay box.

Please help, thank you in advanced!

jsFiddle file: http://jsfiddle.net/Luck12/Csed2/2/

  1. $('input[name="Q45_A_8"]').change(function() {
        if(1 == $(this).val()) {
            $('#myDiv').show();
        } else {
            $('#myDiv').hide();
        }
    }); 






  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

    <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>