聲明一下,這篇文章有一部分是抄襲别人的,原文在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);
});
這兩個取消全選的效果是一樣的
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsICM38CXlZHbvN3cpR2Lc1TPB10QGtWUCpEMJ9CXsxWam9CXwADNvwVZ6l2c052bm9CXUJDT1wkNhVzLcRnbvZ2Lc1TPn1kMFpWT4VERNBDOsJGcohVYsR2MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2LcRHelR3LcJzLctmch1mclRXY39TO4IDMxYTM5AzNxATM4EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)