jquery drill down
<p>I am trying to change the class of a button when a checkbox is checked but I'm having trouble getting it right. When the checkbox is selected I want to change the buttons class to buttonsshow from buttonshide.</p>

<p>HTML</p>

<pre><code>&lt;div class="checkbox"&gt;
    &lt;input id="ChartstoDisplayAll" type="checkbox"     name="ctl00$MainContent$ChartstoDisplayAll" /&gt;&lt;label for="ChartstoDisplayAll"&gt;Select All&lt;/label&gt;
    &lt;p class="checkbox" style="margin-left:5px;"&gt; or select individually below &lt;/p&gt;
    &lt;hr class="horizline" style="width:870px;"/&gt;
&lt;/div&gt;

    &lt;div id="buttons" class="buttonshide"&gt;
        &lt;input type="image" name="ctl00$MainContent$btnGetChart"  id="MainContent_btnGetChart" title="Click here to retrieve the charts" Text="Build the  Charts" src="Styles/Images/stats.png" alt="Build the Charts" align="left" /&gt;
        &lt;p style="font-size:.8em; font-weight:bold;"&gt;Build Charts&lt;/p&gt;
    &lt;/div&gt;
</code></pre>

<p>FYI...There is other html between these two divs. I took it out for brevity as none have an id of buttons.</p>

<p>Here is the javascript. (the latest way that I've tried)</p>

<pre><code> //this script will change the style of the "Select All" checkbox and make visible the "Build Chart" button
  $(document).ready(function () {
      $('#ChartstoDisplayAll').click(
          function () {
              $("INPUT[type='checkbox']").attr('checked', $('#ChartstoDisplayAll').is(':checked'));
              $(this).next().toggleClass("selected");
              $(this).find("buttons").toggleclass("buttonsshow");
          });
  });
</code></pre>

<p>​
Here is the fiddle link
<a href="http://jsfiddle.net/dinotom/h25tM/2/" rel="nofollow">http://jsfiddle.net/dinotom/h25tM/2/</a></p>

<p>Here is the completed, working script which changes the text color and shows the button when the checkbox is selected.</p>

<pre><code> //this script will change the style of the "Select All" checkbox and make visible the "Build Chart" button
  $(document).ready(function () {
      $('#ChartstoDisplayAll').change(
          function () {
              if ($('#ChartstoDisplayAll').is(':checked')) {
                  $(this).next().addClass("selected");
                  $('#buttons').addClass("buttonsshow").removeClass('buttonshide');
              } else {
                  $('#buttons').addClass("buttonshide").removeClass('buttonsshow');
                  $(this).next().removeClass("selected");
              }
          });
  });
</code></pre>
