title: Change checkbox icon class onclick in jQuery
body: <p>I have some checkboxes that come from my database wich look like this:</p>
  
  <pre><code>&lt;input type="checkbox" class="hidden chkbox" id="single_checkbox_&lt;?php echo $page-&gt;ID; ?&gt;"    name="pages[]" value="&lt;?php echo $page-&gt;ID; ?&gt;"/&gt;
  &lt;label rel="tooltip" data-original-title="Selecteer" class="btn" for="single_checkbox_&lt;?php echo $page-&gt;ID; ?&gt;"&gt;&lt;i class="icon-check-empty"&gt;&lt;/i&gt; Selecteer&lt;/label&gt;
  </code></pre>
  
  <p>Now the checkboxes are hidden because i want the label class to act as the checkboxes.</p>
  
  <p>it is in fact working but the problem is that is want to change <code>&lt;i class="icon-check-empty"&gt;&lt;/i&gt;</code> after the checkbox is clicked to <code>&lt;i class="icon-check"&gt;&lt;/i&gt;</code> and back to icon-check-empty after unchecked.</p>
  
  <p>The jquery i have so far is </p>
  
  <pre><code>$('.chkbox').click(function(){
  
          if($(this).is(':checked')){
              $('i.icon-check-empty').replaceWith('&lt;i class="icon-check"&gt;&lt;/i&gt;');
  
          }else{
  
              $('i.icon-check').replaceWith('&lt;i class="icon-check-empty"&gt;&lt;/i&gt;');
  
          }
  
      });
  </code></pre>
  
  <p>It does change however it changes all the checkboxes and that isn't what i'm looking for.</p>
  
  <p>If anybody has an idea on how to help me that would be great.</p>
  
  <p>Kind regards.</p>