Question

我一直在努力解决这个问题几个小时，将其转换到每个方向，但似乎没有任何效果。每个函数都可以单独运行，但是当单击check all按钮时，我似乎无法触发.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')更改checked属性后手动触发更改事件

(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

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

1 个答案: