title: check/uncheck bootstrap checkboxes with jQuery
body: <p>I've made another <a href="https://stackoverflow.com/questions/25123126/select-all-checkboxes-with-jquery-not-working">post</a> yesterday and had no success with it. I will try now to reorder de idea and to ask  again since I can't find the solution for this (I'm a newbie and I'm trying really hard).</p>
  
  <p>The thing is that I'm working with this template based on Bootstrap, and this is the code that I can see directly from one of the files and that I'm using on my project:</p>
  
  <p><em>html snippet:</em></p>
  
  <pre><code>&lt;div class="hide" id="states"&gt;
    &lt;div class="control-group"&gt;                           
      &lt;label class="control-label"&gt;Seleccione&lt;/label&gt;
        &lt;div class="controls"&gt;
          &lt;label class="checkbox span4"&gt;
            &lt;input type="checkbox" value="all" id="allstates" name="all"/&gt;Todas
          &lt;/label&gt;
  
          &lt;label class="checkbox span4"&gt;
            &lt;input class="states" type="checkbox" value="Caba" id="" name="st[]"/&gt;Ciudad Autónoma de Buenos Aires
          &lt;/label&gt;
  
          &lt;label class="checkbox span4"&gt;
            &lt;input class="states" type="checkbox" value="Buenos Aires" id="" name="st[]"/&gt; Buenos Aires
          &lt;/label&gt;
  
          &lt;label class="checkbox span4"&gt;
            &lt;input class="states" type="checkbox" value="Catamarca" id="" name="st[]"/&gt; Catamarca
          &lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><em>After lot of searching I have founded when inspecting it that my code looks like this (snippet):</em></p>
  
  <pre><code>&lt;div class="controls"&gt;
    &lt;label class="checkbox span4"&gt;
      &lt;div class="checker" id="uniform-allstates"&gt;
        &lt;span&gt;
          &lt;input type="checkbox" value="all" id="allstates" name="all"&gt;
        &lt;/span&gt;
      &lt;/div&gt;Todas
    &lt;/label&gt;
  
    &lt;label class="checkbox span4"&gt;
      &lt;div class="checker"&gt;
        &lt;span&gt;
          &lt;input class="states" type="checkbox" value="Caba" id="" name="st[]"&gt;                          
         &lt;/span&gt;
      &lt;/div&gt; Ciudad Autónoma de Buenos Aires
    &lt;/label&gt;
  
    &lt;label class="checkbox span4"&gt;
      &lt;div class="checker"&gt;
        &lt;span&gt;
          &lt;input class="states" type="checkbox" value="Buenos Aires" id="" name="st[]"&gt;                           
        &lt;/span&gt;
      &lt;/div&gt; Buenos Aires
    &lt;/label&gt;
  
    &lt;label class="checkbox span4"&gt;
      &lt;div class="checker"&gt;
        &lt;span&gt;
          &lt;input class="states" type="checkbox" value="Catamarca" id="" name="st[]"&gt;                             
        &lt;/span&gt;
      &lt;/div&gt; Catamarca
    &lt;/label&gt;
  &lt;/div&gt;        
  </code></pre>
  
  <p>As you can see, another div and another span are added (seriously don't know why or how) so I'm guessing now it's some DOM problem the one I'm having.</p>
  
  <p><em>This is snippet of my js file:</em></p>
  
  <pre><code>$('#allstates').click(function() {
    $('.checkbox').find('span').addClass('checked');
  });
  </code></pre>
  
  <p>So this function selects ALL the checkboxes I have (even though the ones that I don't want because they belong to another category).</p>
  
  <p>I want to know why the div and span are added and how to select only the checkboxes that I want.</p>
  
  <p>For that I've been trying code like this but no success:</p>
  
  <p><strong>test 1</strong></p>
  
  <pre><code>$('#allstates').click(function() {
    if ($(this).is(':checked')) {
      $('span input').attr('checked', true);
    } else {
      $('span input').attr('checked', false);
    }
  });
  </code></pre>
  
  <p><strong>test2</strong></p>
  
  <pre><code>$('#allstates').click(function() {
    $(".states").prop("checked",$("#allstates").prop("checked"))
  });
  </code></pre>
  
  <p>and so other ones that I erased.</p>
  
  <p><strong>NOTE:</strong> No js errors are being displayed when inspecting</p>