声明一下,这篇文章有一部分是抄袭别人的,原文在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);
});

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

 

 

相关文章: