jquery auto-check checkbox from same table

Question

I have this code:

HTML

<table class=tbl>
    <tr>
        <td>
            <input class='c1' type='checkbox'>
            <label>Ceckbox1</label>
        </td>
        <td>
            <input class='c2' type='checkbox'>
            <label>Ceckbox2</label>
        </td>
        <td>
            <input class='c2' type='checkbox'>
            <label>Ceckbox2</label>
        </td>
        <td>
            <input class='c2' type='checkbox'>
            <label>Ceckbox2</label>
        </td>
    </tr>
</table>
<table class=tbl>
    <tr>
        <td>
            <input class='c1' type='checkbox'>
            <label>Ceckbox1</label>
        </td>
        <td>
            <input class='c2' type='checkbox'>
            <label>Ceckbox2</label>
        </td>
        <td>
            <input class='c2' type='checkbox'>
            <label>Ceckbox2</label>
        </td>
        <td>
            <input class='c2' type='checkbox'>
            <label>Ceckbox2</label>
        </td>
     </tr>
   </table>

JavaScript

 $('.c2').click(function () {
     if ($(this).parent().find('.c2').is(':checked')) {
         alert('all are checked');
     } else {
         alert('none are checked');
     }
 });

I am trying, with no result, to use jquery to auto-check 'c1' only when all the 'c2' from the same 'tbl' are checked. The count of 'c2' can vary as can the count of 'tbl'.

Answer 1

You can see if all the checkboxes are checked by comparing the total number of checkboxes to the number of checked boxes, within the same parent tr. Try this:

$('.c2').change(function () {
    var $parent = $(this).closest('tr');
    var allChecked = $('.c2', $parent).length === $('.c2:checked', $parent).length;
    $('.c1', $parent).prop('checked', allChecked);
});

Example fiddle