Checkbox funktioniert nicht mehr, nachdem manuell ausgelöst

Question

Ich habe dieses jQuery-Snippet geschrieben, um tr klicken, um eine Bootstrap-Klasse hinzuzufügen und klicken Sie auf die erste checkbox darin.

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

Jedes Mal, wenn ich auf den tr klicken und damit diesen Anruf auslösen:

checkbox.click(); 

ich auf dem Kontrollkästchen nicht nicht mehr klicken, aber der tr Klick funktioniert gut.

Das ist mein HTML-Markup der Tabelle:

<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

Sie können es einfacher als Ihre Methode, wie folgt aus:

Alle Checkbox auswählen Handhabung:(überprüfen/deaktivieren Sie einfach das erste Kontroll Box in Zeilen und Hinzufügen von warning Klasse zu ausgewählten Zeilen).

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

Umgang mit Klicks auf der tr:(auch wir können toggleClass statt add/remove class verwenden).

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

Jetzt sehen JsFiddle DEMO, Ich hoffe, es funktioniert für Sie, Dank.

Answer 2

ich den Code wie folgt geändert haben und das Kontrollkästchen funktioniert gut. Bitte beachten Sie die Änderung des JQuery-Codes mit Kommentaren. .

$ ('Körper') auf ('change', '.select-alle-Kinder', 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'); 

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

Danke

.