Checkboxes to open divs while excluding others

Checkboxes to open divs while excluding others

Later edit: The main problem was solved by changing the .attr ("checked", "") to .sttr ("checked", false). Actually, as the script evolved, those lines were unnecessary altogether, so I removed them.  I also cleaned up the js below which was overcomplicated as a result of trying different approaches. However, if anyone has any suggestions on doing the below code more intelligently, please express them.

Solving this brought another problem to light, which I have moved to another question, titled "Double Selection when Hiding/Showing Textboxes".

jQqueryMobile v1.3.2
jQuery v 1.8.2
This embarrassingly convoluted code is the result of several hours of trying to solve the problem. The original, much simpler code worked fine in a desktop browser, but not in Android. This almost works.

The problem is this:
The user has one of three selections. To avoid confusion, the solution was to hide the other two checkboxes  when one checkbox is selected, and show that checkboxes associated content. When the checkbox is then checked "off", the content divs disappears and only the three checkboxes again show.

For a simple diagram, opening screen displays three checkboxes:
Smartphone Text Message
Phone
E-mail Message

Each has inputs in a div below for the required information. When one checkbox is selected, only that checkbox shows, along with its content div. The other checkboxes disappear.

For instance, when the SmartphoneText Message is checked, the screen will look like this:
Smartphone Text Message
      Phone Number: _________________
      Carrier:            (select drop down)
(Phone and Email checkboxes are gone)

On page init, Selecting any checkbox will produce the desired outcome (checkbox checked, related content div showing.) Close (uncheck) always works (back to only the three checkboxes.
However, when selecting a second checkbox at that point, the first touch does not set the checkbox as checked. A subsequent touch will produce the expected result.

(There is an "I" after the content div names. For instance, the checkbox is CabNow_RespondText, where the content div is CabNow_RespondTextI)

  1.          <form id="CabNow_Form" name="CabNowForm" method="post" action="<? $_SERVER[PHP_SELF]; ?>" style="margin:0; padding:0;">
                <h3>Pickup Request</h3>
                Select a response method:<br />
                <div id="RadioText"><input type="checkbox" name="ResponseType" id="CabNow_RespondText" value="RT" /><label for="CabNow_RespondText">Smartphone Text Message</label></div>
                <div id="CabNow_RespondTextI" style="display:none;">
                   <div class="Label">Phone Number:</div>
                   <div class="Input"><input type="Number" class="Phone" name="TextNumber" id="CabNow_TextNumber" maxlength="15" /></div>
                   <div class="Label" style="clear:left;">Your Carrier:</div>
                   <div class="Input"><?PHP echo PopSelect('Carrier', $Carriers,'','',0); ?></div>
                </div>
                <div class="Clear"></div>











  3.             <div id="RadioPhone"><input type="checkbox" name="ResponseType" id="CabNow_RespondPhone" value="RP" /><label for="CabNow_RespondPhone">Phone</label></div>
                <div id="CabNow_RespondPhoneI" 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="CabNow_Phone" maxlength="15" /></div>
                   </div>
                   <div style="width:25%; display:inline-block; margin-left:10px;">
                      Ext:<br />
                      <input type="text" name="Ext" maxlength="5" />
                   </div>
                </div>
                <div class="Clear" style="clear:both;"></div>












  5.             <div id="RadioEmail"><input type="checkbox" name="ResponseType" id="CabNow_RespondEmail" value="EM" /><label for="CabNow_RespondEmail">E-mail Message</label></div>
                <div id="CabNow_RespondEmailI" style="display:none;">
                   <div class="Label">E-mail Address:</div>
                   <div class="Input"><input type="email" name="Email" id="CabNow_Email" maxlength="50" /></div>
                </div>
                <div class="Clear"></div>
     





At the bottom of the page:
  1.    <script type="text/javascript">
          $(document).on("pageinit", "#CabNow", function ()
          {
             $("#CabNow_RespondEmail").bind ("change", function (event) {
                if($("input#CabNow_RespondEmail").attr ("checked"))   // See if box is checked or not
                {
                   $("#CabNow_RespondEmailI").show();   //show email content box
                  $("#RadioText").hide();                            // hide Text checkbox
                   $("#RadioPhone").hide();                         // hide Phone checkbox
                   $('#CabNow_Email').focus();                    // sometimes works
                }
                else                                                         // if Email checkbox is not checked
                {
                $("#CabNow_RespondEmailI" ).hide();          // hide Email content  
                   $("#RadioText").show();                            // show Text checkbox         
                   $("#RadioPhone").show();                         // show Phone checkbox
                }
             });
             $("#CabNow_RespondPhone").bind ("change", function (event) {
                if($("input#CabNow_RespondPhone").attr ("checked"))
                {
                   $("#CabNow_RespondPhoneI").show();
                   $("#RadioText" ).hide();
                   $("#RadioEmail" ).hide();
                   $('#CabNow_Phone').focus();
                }
                else
                {
                   $("#CabNow_RespondPhoneI" ).hide();
                   $("#RadioText").show();
                   $("#RadioEmail").show();
                }
             });
































  2.          $("#CabNow_RespondText").bind ("change", function (event) {
                if($("input#CabNow_RespondText").attr ("checked"))
                {
                   $("#CabNow_RespondTextI").show();
                   $("#RadioPhone" ).hide();
                   $("#RadioEmail" ).hide();
                   $('#CabNow_TextNumber').focus();
                }
                else
                {
                   $("#CabNow_RespondTextI" ).hide();
                   $("#RadioPhone").show();
                   $("#RadioEmail").show();
                }
             });
    </script>














I have spent my day messing with this. It is crucial to the site, and the only thing keeping the site from going live. I can't begin to express how much a solution would be appreciated.

Originally, these were just three radio buttons. The problem we found in user tests was that, without hiding the other checkboxes, the user sometimes would select the Text message, then check the "Phone" checkbox, thus sending the wrong information.