来自同一个表的jquery自动复选复选框

Question

我有这个代码:

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');
     }
 });

我正在尝试使用jquery仅在检查来自相同'tbl'的所有'c2'时自动检查'c1'.'c2'的计数可以变化,'tbl'的计数也可以变化.

Answer 1

尝试这个代码它的工作原理：

演示版

$('.c2').change(function(){
    var all = true;
    $(this).parent().parent().find('.c2').each(function(index){
        if(!($(this).is(':checked'))){
           all =  false;
        }
    });
    if (all==true){
        $(this).parent().parent().find('.c1').attr('checked', true);
    }
});