jQuery全选取消全选

最新推荐文章于 2024-04-25 11:38:14 发布

weixin_40112162

最新推荐文章于 2024-04-25 11:38:14 发布

阅读量3.3k

点赞数 1

分类专栏： js/jQuery 文章标签： jQuery js 全选取消全选 checkbox

本文链接：https://blog.csdn.net/weixin_40112162/article/details/83104477

版权

js/jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

声明一下，这篇文章有一部分是抄袭别人的，原文在https://blog.csdn.net/cristina_song/article/details/77406331
html:
<table class="table table-hover" style="min-width: 300px;">
    <thead class="navbar-inner">
    <tr>
        <th class=" text-center" style="width: 20px;"></th>
        <th class=" text-center" style="width: 180px;">发车时间</th>
        <th class=" text-center" style="width: 180px;">线路名称</th>
        <th class=" text-center" style="width: 180px;">手机号码</th>
        <th class=" text-center" style="width: 180px;">乘车站点</th>
        <th class=" text-center" style="width: 180px;">目标站点</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class=" text-center">
            <input type="checkbox" name="sub"/>
        </td>
        <td style="text-align: center;height: 57px;">2018-08-19 12:00</td>
        <td style="text-align: center;">白云山8</td>
        <td style="text-align: center;">13011112222</td>
        <td style="text-align: center;">白云山</td>
        <td style="text-align: center;">白云山丁</td>
    </tr>
</table>
<div class="form-group">
    <input type="checkbox" style="margin-left: 10px" id="selectAll"/>全选
    <input type="submit" class="btn btn-primary next-step" value="上一步" style="margin-left: 80%;margin-right:20px;width: 100px;">
    <input type="submit" class="btn btn-primary next-step" value="发送" style="width: 100px;">
</div>

jQuery:

/**
 * 全选按钮
 */
$("#selectAll").on("click",function(){
    var flag = $(this).is(":checked");
    $("input[type=checkbox]").each(function () {
        $(this).prop("checked", flag);
    });
});
/**
 * 取消全选
 */
$("input[name=sub]").on("click",function(){
    var flag = true;
    for (var i = 0; i < $("input[name=sub]").length; i++) {
        if (!$($("input[name=sub]")[i]).is(":checked")) {
            flag = false;
            break;
        }
    }
    $("#selectAll").prop("checked", flag);
});

/**
 * 取消全选
 */
$("input[name=sub]").on("click",function(){
    var flag = true;
    for (var i = 0; i < $("input[name=sub]").length; i++) {
        if (!$("input[name=sub]").eq(i).is(":checked")) {
            flag = false;
            break;
        }
    }
    $("#selectAll").prop("checked", flag);
});

这两个取消全选的效果是一样的