Check all

by Leandro Barbosa

HTML

<p class="check">
  <input id="chk1" type="checkbox" class="all" />
  <label for="chk1">Check/Uncheck all</label>
  <br />

  <input type="checkbox" /> 1
  <br />
  <input type="checkbox" /> 2
  <br />
  <input type="checkbox" /> 3
  <br />
  <input type="checkbox" /> 4
  <br />
  <input type="checkbox" /> 5
  <br />
  <input type="checkbox" /> 6
  <br />
  <input type="checkbox" /> 7
</p>

<p class="check">
  <input id="chk2" type="checkbox" class="all" />
  <label for="chk2">Check/Uncheck all</label>
  <br />

  <input type="checkbox" /> 1
  <br />
  <input type="checkbox" /> 2
  <br />
  <input type="checkbox" /> 3
  <br />
  <input type="checkbox" /> 4
  <br />
  <input type="checkbox" /> 5
  <br />
  <input type="checkbox" /> 6
  <br />
  <input type="checkbox" /> 7
</p>

CSS

.check {
  padding: 10px;
}

JavaScript

$(document).ready(function() {
  $('.all').on('click', function() {
    var $checkboxes = $(this).parent().find('input[type=checkbox]');
    $checkboxes.prop('checked', $(this).is(':checked'));
  });
});