Включить / выключить проверку нескольких списков флажков с помощью jQuery

Question

У меня есть две проблемы с проверкой и снятием отметки (выбрать и отменить выбор всех) контрольного списка:

1. Родительский флажок не проверяет / снимает отметку.
2. Мне нужно только выбратьchildren.

Пример:

http://jsfiddle.net/TheFiddler/v6wmV/,

$(document).ready(function(){
    $('.all').toggle(
        function() {
            $('.check').find('input[type=checkbox]').attr('checked', true);
        },
        function() {
            $('.check').find('input[type=checkbox]').attr('checked', false);
        });
});

Прямо сейчас у меня есть событие в классе, и так как класс является общим для обоихсписки флажков, все они переключаются.

Answer 1

Демо

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

HTML

<div class="check">
      <input type="checkbox" class="all" /> Check/Uncheck all<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
</div>
...

Answer 2

Хороший пост выше. Еще один способ использования каждой функции, но не только дочерние.

jQuery('.check-all').click(function() {
      jQuery('.checked-rec').each(function() {
        $(this).attr('checked', $('.check-all').is(':checked'));
      })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<thead>
  <tr>
    <th>
      <input type="checkbox" class="check-all">
    </th>
  </tr>
</thead>

<tbody>

  <tr class="odd gradeX">
    <td>
      <input type="checkbox" class="checked-rec">
    </td>
  </tr>

  <tr class="odd gradeX">
    <td>
      <input type="checkbox" class="checked-rec">
    </td>
  </tr>

  <tr class="odd gradeX">
    <td>
      <input type="checkbox" class="checked-rec">
    </td>
  </tr>

  <tr class="odd gradeX">
    <td>
      <input type="checkbox" class="checked-rec">
    </td>
  </tr>

</tbody>