0

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

第一个功能来自此：它选择所有复选框，但更改不会影响第二个功能。第二个功能来自此：它更改了 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 用于调试目的，因此您可以忽略它。

4

1 回答 1

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

演示：小提琴

您可以通过使用类似（未测试）仅更改未处于所需状态的复选框来改进选择器

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

演示：小提琴

于 2013-11-07T02:39:52.573 回答