复选框全选和取消全选问题

发表于 | 更新于 | 阅读次数 1
复选框全选和取消全选问题

结构如下

1
2
3
4
5
6
全选：<input type="text" class="choiceAll">

北京：<input type="text" class="choiceSingle">
上海：<input type="text" class="choiceSingle">
广州：<input type="text" class="choiceSingle">
深圳：<input type="text" class="choiceSingle">

最初想到的解决办法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$('.choiceAll').on('click', function () {
    if ($(this).is(":checked")) {
        toChoiceAll();
    } else {
        toCancelChoiceAll();
    }
});
// 全选
var toChoiceAll = function () {
    $(".choiceSingle").("checked", true);
};
// 取消全选
var toCancelChoiceAll = function () {
    $(".choiceSingle").("checked", false);
    // 或 $(".choiceSingle").removeAttr("checked");
};

测试的时候我们会发现，第一次全选和取消全选是OK的，但是第二次后会出问题，观察dom，发现第二次全选之后，每个自己复选框的checked确实是移除了，但是页面却没有及时更新，这个时候我们需要遍历每一个然后再处理

正确的处理方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 点击全选复选框
$('.choiceAll').on('click', function () {
    if ($(this).is(":checked")) {
        toChoiceAll();
    } else {
        toCancelChoiceAll();
    }
});
// 全选
var toChoiceAll = function () {
    $(".choiceSingle").each(function(){
        $(this).prop("checked", true);
    });
};
// 取消全选
var toCancelChoiceAll = function () {
    $(".choiceSingle").each(function(){
        $(this).prop("checked", false);
    });
};
// 点击批量退款按钮
$('#refundBtn').on('click', function (event) {
    // 下面增加了一个收集子级（其他页面结构）中的某个id值
    var checkNode = $('.choiceSingle');
    var idNode = $('.refundId');
    var checkedList = [];
    for (var i = 0, len = idNode.length; i < len; i++) {
        if (checkNode.eq(i).is(":checked")) {
            checkedList.push(idNode.eq(i).text());
        }
    }
    if (checkedList.length === 0) return false;
    // 用checkedList发起请求
    // ...
});