web开发 Table增加全选
效果图
HTML代码
HTML 全选
<table class="table table-hover table-sm" id="data-content">
<thead>
<tr>
<th><input type="checkbox" class="mr-1" id="select-all">选择</th>
<th>插件名称</th>
<th>插件描述</th>
<th>图标</th>
<th style="width:110px;">操作</th>
</tr>
</thead>
<tbody>
@foreach (var obj in Model)
{
<tr>
<td><input type="checkbox" class="item-check" data-id="@obj.rowID"></td>
<td>@obj.pluginName</td>
<td>@obj.pluginDescription</td>
<td>@obj.icon</td>
<td>
<a href="@Url.Action("edit",new { id=obj.rowID })">修改</a>
<a class="text-danger" href="" data-id="@obj.rowID" data-title="@obj.pluginDescription" onclick="OnDelete(this);return false;">删除</a>
</td>
</tr>
}
</tbody>
</table>JS代码
页面加载完成后，绑定check的选择事件
点击全选按钮：全部选中，全部不选中
点击行选中：控制全部选中checkbox的状态，选中，未选中，不确定状态
1、设置选中或者未选中时，需要先移除不确定状态，不然界面上checkbox显示始终为不确定状态
2、通过jquery prop设置checked的时候，不会触发change事件
jquery判断check,checkbox是否存在选中
如果选中的check元素列表大于0，就代表有选中
JavaScript 全选
var hasSelect= $('#data-content .item-check:checked').length>0;jquery判断check,checkbox是否全部选中
没有未选中的节点，就代表全部选中咯
JavaScript 全选
var allSelect= $('#data-content .item-check:not(:checked)').length==0;
JavaScript 全选
$(document).ready(function(){
$("#select-all").change(function(){
$("#data-content .item-check").prop('checked',$(this).prop("checked"))
})
$("#data-content .item-check").change(function(){
var allSelect= $('#data-content .item-check:not(:checked)').length==0;
if(allSelect){
$("#select-all").prop("indeterminate", false);
$("#select-all").prop('checked',true)
}else{
var hasSelect= $('#data-content .item-check:checked').length>0;
if(hasSelect){
$("#select-all").prop("indeterminate", true);
}
else{
$("#select-all").prop("indeterminate", false);
$("#select-all").prop('checked',false)
}
}
})
})版权声明：本文为YES开发框架网发布内容,转载请附上原文出处连接
post 管理员
