title: Select one element at a time using jquery
body: <p>I have multiple input checkboxes wrapped up in p tags <code>&lt;p&gt;&lt;input type="checkbox" /&gt;&lt;/p&gt;</code>. I'm trying to change the <code>background-color</code> of the P tag when the checkbox is <code>:checked</code> The problem I'm having is that all of the <code>&lt;p&gt; &lt;/p&gt;</code> tags background colors are changing at the same time. I only want the current paragraph tag <code>background-color</code> to change.</p>
  
  <p><strong>HTML</strong>
       </p>
  
  <pre class="lang-or-tag-here prettyprint-override"><code>&lt;p&gt;
    &lt;input type="checkbox"  /&gt;
    &lt;label&gt;Animals &amp;amp; Pets&lt;/label&gt;
  &lt;/p&gt;
  
  &lt;p&gt;
    &lt;input type="checkbox"  /&gt;
    &lt;label&gt;Business &amp;amp; Finance&lt;/label&gt;
  &lt;/p&gt;
  
  &lt;p&gt;
    &lt;input type="checkbox" /&gt;
    &lt;label&gt;Auto's &amp;amp; Cycles&lt;/label&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre class="lang-or-tag-here prettyprint-override"><code>.highlight { background-color: #DDD; }
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre class="lang-or-tag-here prettyprint-override"><code>  $(document).ready(function() {
    $('input').click(function() {
       if ($(this).is(':checked')) {
    $('p').addClass('highlight')
      } else {
    $('p').removeClass('highlight')
     }
    });
  });
  </code></pre>