проверить все флажки и изменить цвет всех JQuery

Question

Я пытался понять это в течение нескольких часов, переключая его вокруг каждого способа, но ничего не работает. Каждая функция работает отлично по отдельности, но я не могу заставить функцию .change срабатывать при нажатии кнопки «Проверить все». Что я делаю не так?

Первая функция от this: Она выбирает все флажки, но изменение не влияет на вторую функцию. Вторая функция от this: Она изменяет класс divs (и, следовательно, css), но только если установлен один флажок/снят флажок.

$(document).ready(function(){ 
(function() { 
    var checked = false; 
    $('button.check-all').click(function() { 
     checked = !checked; 
     $('input[class^="orgImgColl\["]').prop('checked', checked); 
     if (checked) $(this).text('Uncheck All'); 
     else $(this).text('Check All'); 
    }); 
})(); 

$('input[class^="orgImgColl\["]').change(function(){ 
    if(this.checked){ 
     $(this).children('table').removeClass('unchecked'); 
     $(this).children('table').addClass('checked'); 
     $(this).siblings('table').removeClass('unchecked'); 
     $(this).siblings('table').addClass('checked'); 
     $(this).parentsUntil('tr').removeClass('unchecked'); 
     $(this).parentsUntil('tr').addClass('checked'); 
    } else { 
     $(this).children('table').removeClass('checked'); 
     $(this).children('table').addClass('unchecked'); 
     $(this).siblings('table').removeClass('checked'); 
     $(this).siblings('table').addClass('unchecked'); 
     $(this).parentsUntil('tr').removeClass('checked'); 
     $(this).parentsUntil('tr').addClass('unchecked'); 
    } 

}); 

});

здесь является HTML/PHP

<div class=\"unchecked\">"; 

echo "<input class=\"orgImgColl[".$i."]\" style=\"float:right\" type=\"checkbox\" name=\"orgImgColl[]\" value=\"".$row['img_id']."\"/> 

<table class="unchecked" id="imgList" cellspacing="0" cellpadding="3" width="90%"> 
etc. 

Точно так же вы знаете, что $ я в классе ввода для отладки, так что вы можете игнорировать его.

Answer 1

Это происходит потому, что при изменении отмеченного состояния с помощью сценария события изменения не уволили, то решение, чтобы вызвать событие изменения вручную после того, как проверяется свойство изменяется с помощью .change() или .trigger('change')

(function() { 
    var checked = false; 
    $('button.check-all').click(function() { 
     checked = !checked; 
     $('input[class^="orgImgColl\["]').prop('checked', checked).change(); 
     if (checked) { 
      $(this).text('Uncheck All'); 
     } else { 
      $(this).text('Check All'); 
     } 
    }); 
})(); 

Demo: Fiddle

Вы можете улучшить селектор, изменяя только те флажки, которые не находятся в нужном состоянии, используя что-то вроде (не проверено)

$('input[class^="orgImgColl\["]')[checked?'not':'filter'](':checked').prop('checked', checked).change(); 

Демонстрация: Fiddle