填坑系列: jQuery解决复选框只能全选一次

最新推荐文章于 2020-07-19 22:30:06 发布

Quincy Chen

最新推荐文章于 2020-07-19 22:30:06 发布

阅读量637

点赞数

分类专栏：前端-jQuery 文章标签： jquery checkbox 前端 prop

本文链接：https://blog.csdn.net/iamqqstar/article/details/50391932

版权

前端-jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

填坑系列: jQuery解决复选框只能全选一次

一开始的做法是这样的

$("[name='selectAll']:checkbox").click(function(){
    if ($(this).attr("checked") == true) {
        $("[name='data-item']:checkbox").attr('checked', true);
    } else {
        $("[name='data-item']:checkbox").attr('checked', false);
    }
});

但是发现这样写只能全选和取消全选各一次, 之后点击selectAll复选框, 只有它自己被选中, 其他都未被选中

最终解决方法

$("[name='selectAll']:checkbox").click(function(){
    if ($(this).prop("checked") == true) {
        $("[name='data-item']:checkbox").prop('checked', true);
    } else {
        $("[name='data-item']:checkbox").prop('checked', false);
    }
});

或者更简洁的方法

$("[name='selectAll']:checkbox").click(function(){
    var checkOrNot = $(this).prop("checked");
    $("input[name='data-item']").prop("checked", checkOrNot);
});