天天看點

jQuery全選取消全選

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

這兩個取消全選的效果是一樣的

jQuery全選取消全選
jQuery全選取消全選