Question

我有一个复选框字段，对应于我使用tablesorter插件输出的表格的每一行。通过此字段检查，用户可以发布/删除.etc en masse。因此我有一个全选按钮。问题是，在更改回传之后以及在低数字和高数字之间的第四个之后，一些事情可能仍然被检查，而不应该。因此，当用户更改分页时，我只希望复选框重置为默认的未选中值。我使用以下代码：

$(document).ready(function () {
    $('a.check').toggle(function () {
        $('input:checkbox').attr('checked', 'checked');
        $(this).text('Uncheck all')
    }, function () {
        $('input:checkbox').removeAttr('checked');
        $(this).text('Check all');
    });
    $('.pagesize').change(function(){
        $('input:checkbox').removeAttr('checked');
        $('a.check').text('Check all');
    });
});

<a href="#" class="check btn">Check All</a>
  <select class="pagesize">
    <?php echo arrayToSelect($pageSize, '5'); ?>
  </select>

但是，无论何时用户更改页面大小，您都必须单击“检查”按钮两次以使全部选择功能再次起作用。知道问题可能是什么吗？

您可以通过更改页面大小，然后尝试点击“全部检查”来查看问题

http://jsfiddle.net/H7SJd/

Answer 1

测试一下：

DEMO

$(function () {
    $("table")
        .tablesorter({
        widthFixed: true,
        widgets: ['zebra']
    })
        .tablesorterPager({
        container: $("#pager")
    });
});
/* my version
$(document).ready(function () {
    $('a.check').toggle(function () {
        $('input:checkbox').attr('checked', 'checked');
        $(this).text('Uncheck all')
    }, function () {
        $('input:checkbox').removeAttr('checked');
        $(this).text('Check all');
    });
    $('.pagesize').change(function(){
        $('input:checkbox').removeAttr('checked');
        $('a.check').text('Check all');
    });
});
*/
$(document).ready(function () {
    $('a.check').click(function (e) {

        var txt = $(this).text();
        if (txt === 'Check All') {
            $('input:checkbox').prop('checked', true);            
            $(this).text('Uncheck All')
        } else { $('input:checkbox').prop('checked',false);
            $(this).text('Check All');
        }
    });
    $('.pagesize').change(function () {
        $('input:checkbox').prop('checked',false);
        $('a.check').text('Check All');
    });
});

Answer 2

点击http://jsfiddle.net/yeyene/H7SJd/5/

查看DEMO

$(function() {
        $("table")
            .tablesorter({widthFixed: true, widgets: ['zebra']})
            .tablesorterPager({container: $("#pager")});
    });
$(document).ready(function () {
    $('a.check').click(function () {        
        $('input:checkbox').each(function(){
            if($(this).is(":checked")){
                $(this).removeAttr('checked');
                $('a.check').text('Check all');

            }
            else{
                $(this).attr('checked', 'checked');
                $('a.check').text('Uncheck all');
            }
        });
    });
    $('.pagesize').change(function(){
        $('input:checkbox').removeAttr('checked');
        $('a.check').text('Check all');
    });
});

jquery选中所有带复选框问题的按钮

2 个答案: