检查所有复选框并更改所有 Jquery 的颜色

Question

我一直试图解决这个问题好几个小时，以各种方式切换它，但似乎没有任何效果。每个功能单独工作都很好，但是当单击检查所有按钮时，我似乎无法触发 .change 功能。我做错了什么？

第一个函数来自this：它选择了所有的复选框，但更改不影响第二个函数。 第二个函数来自this：它会更改 div 的类（因此也会更改 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.

只是让您知道输入类中的 $i 用于调试目的，因此您可以忽略它。

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

演示：Fiddle

您可以通过仅更改那些未处于所需状态的复选框来改进选择器，例如（未测试）

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

演示：Fiddle