title: Selecting all the checkboxes inside divs using jquery
body: <p>I want to select all the checkboxes once the "select all" checkbox is clicked. Here`s is the code</p>
  
  <pre><code>&lt;div class="fp"&gt;
    &lt;div class="fpanel"&gt;
      &lt;div class="fpblockscontainer"&gt; 
        &lt;span class="fpblockslabel"&gt;Merchants&lt;/span&gt;    
        &lt;div class="fpblocks"&gt;
          &lt;label class="checkbox"&gt;
            &lt;input class=".select-all2" type="checkbox"&gt;Select All&lt;/label&gt;
          &lt;label class="checkbox"&gt;
            &lt;input type="checkbox"&gt;Apple&lt;/label&gt;
          &lt;label class="checkbox"&gt;
            &lt;input type="checkbox"&gt;orange&lt;/label&gt;
          &lt;label class="checkbox"&gt;
            &lt;input type="checkbox"&gt;potato&lt;/label&gt;
          &lt;label class="checkbox"&gt;
            &lt;input type="checkbox"&gt;Williams-Sonoma&lt;/label&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here I need to select all the checkbox once the "select.all2" checkbox is selected. The below jquery code is not working. Where am I wrong?</p>
  
  <pre><code>$(".select-all2").on("click", function () {
    if ($(this).is(':checked')) {
      $(this).closest("div.fp").find(':checkbox').each(function () {
        $(this).attr('checked', 'checked');
      });
    } else {
      $(this).closest("div.fp").find(':checkbox').each(function () {
        $(this).removeAttr('checked');
      });
    }
  });
  </code></pre>