效果图：
代码如下：
<link rel="stylesheet" href="http://wiki.jikexueyuan.com/project/bootstrap4/dist/css/bootstrap.min.css" rel="external nofollow" >
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<table class="table table-bordered ">
<thead class="tab_head">
<tr>
<td> <input type="checkbox" onclick="selectAll()"></td>
<th>角色名称</th>
<th>角色说明</th>
<th>所属系统</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="checkbox"></td>
<td>系统管理员</td>
<td>管理员角色</td>
<td>武进公安平台</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>系统管理员</td>
<td>管理员角色</td>
<td>武进公安平台</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>系统管理员</td>
<td>管理员角色</td>
<td>武进公安平台</td>
</tr>
</tbody>
</table>
<script>
function selectAll(){
$("input[type='checkbox']").each( function() {
if($(this).prop("checked")==true) {
$("input[type='checkbox']").prop('checked', true);
return;
} else {
$("input[type='checkbox']").prop('checked', false);
return;
}
});
}
</script>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持找一找教程网！
