手動でトリガした後にチェックボックスが機能しなくなる

Question

このjQueryスニペットをtrを処理するように記述しました。ブートストラップクラスを追加して最初のcheckboxをクリックします。私はtrをクリックするので、この呼び出しトリガーたび

$('body').on('change', '.select-all-children', function(e) { 
    var checked = this.checked; 

    $('.select-child').each(function() { 
    $(this).prop('checked', checked); 

    if(checked) { 
     $(this).parent().parent().addClass('warning'); 
    } else { 
     $(this).parent().parent().removeClass('warning'); 
    } 
    }); 

}); 

$('body').on('click', '.table-selectable tbody tr', function(e) { 
    var checkbox = $(this).find('.select-child'); 

    checkbox.click(); 

    var checked = checkbox[0].checked; 

    if(checked) { 
    $(this).addClass('warning'); 
    } else { 
    $(this).removeClass('warning'); 
    } 
}); 

$('body').on('change', '.select-child', function(e) { 
    var checked_total = $('.select-child:checked').length; 

    if(checked_total == $('.select-child').length) { 
    $('.select-all-children').prop('checked', true); 
    } else { 
    $('.select-all-children').prop('checked', false); 
    } 
}); 

：

checkbox.click(); 

を私はこれ以上のチェックボックスをクリックすることはできませんが、trクリックが正常に動作します。

これは、テーブルの私のHTMLマークアップです：

<table class="table table-selectable"> 
    <thead> 
    <tr> 
     <th> 
     <input type="checkbox" class="select-all-children"> 
     </th> 
    </tr> 
    </thead> 

    <tbody> 
    <tr> 
     <tr> 
     <td> 
      <input type="checkbox" class="select-child"> 
     </td> 
     </tr> 
    </tr> 
    </tbody> 
</table> 

Answer 1

あなたはこのように、より簡単にあなたの方法よりもそれを行うことができます（ちょうど最初のチェックをオフ/チェックします：すべて選択]チェックボックスを取り扱い

選択した行にwarningクラスを追加します）。 （また、我々はtoggleClass代わりのadd/remove classを使用することができます）：TRのクリックを処理

$('.select-all-children').click(function (e) { 
    $(this).closest('table').find('tr td:first-child input:checkbox').prop('checked', this.checked); 

    if (this.checked){ 
     $(this).closest('table').find('tbody tr').addClass('warning'); 
    } else { 
     $(this).closest('table').find('tbody tr').removeClass('warning'); 
    } 
}); 

。

$('.table-selectable tbody tr td:first-child input:checkbox').on('click', function(e) { 
    $(this).closest('tr').toggleClass('warning'); 
}); 

さておかげで、私はそれはあなたのために働く願っていJsFiddle DEMO、を参照してください。

Answer 2

私はこのようなコードを変更していると、チェックボックスが正常に動作します。コメントを使ってJQueryコードの変更を見てください。

$（ '体'）（ '変更'、 '.select-すべての子供たち'、機能（E）に{ varが=にチェックthis.checked;。

 $('.select-child').each(function() { 
      $(this).prop('checked', checked); 

      if (checked) { 
       $(this).parent().parent().addClass('warning'); 
      } else { 
       $(this).parent().parent().removeClass('warning'); 
      } 
     }); 

    }); 

    $('body').on('click', '.table-selectable tbody tr', function (e) { 
     var checkbox = $(this).find('.select-child'); 

     //Old code commented: 
     //checkbox.click(); 

     //Modified Code: 
     checked.click(); 

     var checked = checkbox[0].checked; 

     if (checked) { 
      $(this).addClass('warning'); 
     } else { 
      $(this).removeClass('warning'); 
     } 
    }); 

    $('body').on('change', '.select-child', function (e) { 
     var checked_total = $('.select-child:checked').length; 

     if (checked_total == $('.select-child').length) { 
      $('.select-all-children').prop('checked', true); 
     } else { 
      $('.select-all-children').prop('checked', false); 
     } 
    }); 

はありがとうござい

。