title: Toggle a button to be viewed after a checkbox has been checked, and disappear if unchecked
body: <p>Below I have code for a specific application that I am building with PHP. My job is User interface, and I have looked and looked for code on how to make this work.</p>
  
  <p>With this form, it's using the latest update of Jquery UI to styalize the buttons and checkboxes. I need for the button to appear when a check box has been checked, and disappear when unchecked.</p>
  
  <p>Haven't been able to find any code that works for this, and is driving me half insane, and lagging me behind.</p>
  
  <pre><code>&lt;form name="purpose" method="post" action="" &gt;
      &lt;div id="radiosetPURPOSE"&gt;
          &lt;input type="checkbox" id="radio1" name="homework" value="homework" &gt;&lt;label for="radio1" style="font-size: 13pt; width: 130px; height: 40px;"&gt;Homework&lt;/label&gt;
          &lt;input type="checkbox" id="radio2" name="computer" value="computer" &gt;&lt;label for="radio2" style="font-size: 13pt; width: 130px; height: 40px;"&gt;Computer&lt;/label&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div id="radiosetPURPOSE2"&gt;
          &lt;input type="checkbox" id="radio3" name="books" value="books" &gt;&lt;label for="radio3" style="font-size: 13pt; width: 130px; height: 40px;"&gt;Books&lt;/label&gt;
          &lt;input type="checkbox" id="radio4" name="reading" value="reading" &gt;&lt;label for="radio4" style="font-size: 13pt; width: 130px; height: 40px;"&gt;Reading&lt;/label&gt;                     
      &lt;/div&gt;
      &lt;br /&gt;
          &lt;div id="radiosetPURPOSE3"&gt;
          &lt;input type="checkbox" id="radio5" name="tutoring" value="tutoring" &gt;&lt;label for="radio5" style="font-size: 13pt; width: 130px; height: 40px;"&gt;Tutoring&lt;/label&gt;                     
      &lt;/div&gt;
      &lt;br  /&gt;&lt;br  /&gt;&lt;br  /&gt;&lt;br  /&gt;
          &lt;div id="btnCheckin" style="display:none"&gt;   
          &lt;button id="btnCheckinBtn" style="font-size: 18pt; width: 175px; height: 75px;"&gt;Check In&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>