Double Selection when Hiding/Showing Textboxes

Double Selection when Hiding/Showing Textboxes

I have three textboxes, each with content underneath them, in a structure like so:
  1. <div>checkbox 1, id="Text"<label>label text</label</div>
  2.    <div>Text related content</div>
  3. <div>checkbox 2, id="Phone"<label>label text</label</div>
  4.    <div>Phone related content</div>
  5. <div>checkbox 3, id="Email"<label>label text</label</div>
  6.    <div>Email related content</div>

On page initialization, the content divs are hidden, using css display:none. When any checkbox is checked, the other two checkboxes disappear, and the checked box's content div is shown.
When the checked box is subsequently unchecked, its' content box disappears, and nothing but the three checkboxes is displayed.

For example, if Phone is selected, the screen changes from this:
[ ] Text
[ ] Phone
[ ] E-mail

TO THIS:
[x ] Phone
   Phone Number: _________________

Notice that the Phone checkbox is now in the position of the Text checkbox, and that the same position will be occupied by the Text checkbox after the Phone checkbox is unchecked. The problem this presents is that, when the Text checkbox reappears, the change event is triggered on that checkbox, and it reads as checked, thus displaying its' content div.  The physical checkbox, however, is not displayed as checked.

This is a physical thing. If I place a top margin in the Text checkbox, so that it is not reappearing exactly beneath the box being unchecked, the problem does not occur.

Here is an example of the markup for one checkbox:
  1.             <div id="RadioPhone"><input type="checkbox" name="ResponseType" id="RespondPhone" value="RP" /><label for="RespondPhone">Phone</label></div>
                <div id="RespondPhoneContent" style="display:none;">
                   <div style="width:56%; float:left;">
                      <div class="Label">Phone Number:</div>
                      <div class="Input"><input type="Number" class="Phone" name="Phone" id="Phone" /></div>
                   </div>
                   <div style="width:25%; display:inline-block; margin-left:10px;">
                      Ext:<br />
                      <input type="text" name="Ext" />
                   </div>
                </div>










And here is the JavaScript for the Phone OnChange. Script for other checkboxes is identical, except the names have been changed to protect the selected.  These bits of code will later be put into functions to avoid redundancy, but this is how I put it together as I was experimenting:

When a checkbox is checked, it needs to hide the other two checkbox divs. When it is unchecked, it needs to hide its' content block and show the other two checkboxes again.

  1.       $(document).on("pageinit", "#CabNow", function ()
          {
             $("#RespondPhone").bind ("change", function (event) {
                if($("input#RespondPhone").attr ("checked"))
                {
                   $("#RespondPhoneContent").show();
                    $("#RadioText").hide();
                   $("#RadioEmail").hide();
                   $('#Phone').focus();
                }
                else
                {
                   $("#RespondPhoneContent").hide();
                   $("#RadioText").show();
                   $("#RadioEmail").show();
                 }
             });