1、html代码
<table border="2" style="margin: 0 auto;text-align: left;width: 800px">
<thead>
<tr>
<th><input type="checkbox" name="all">全选</th>
<th>id</th>
<th>用户名</th>
<th>昵称</th>
<th>邮箱</th>
<th>角色</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
{% for user in userlist %}
<tr>
<td><input type="checkbox" name="id" value="{{ user.UserID }}" onclick="userCheck(this)"></td>
<td>{{ user.UserID }}</td>
<td>{{ user.Username }}</td>
<td>{{ user.NickName }}</td>
<td>{{ user.Email }}</td>
<td>{{ user.Role.RoleName }}</td>
<td>
<img id="update" src="/static/img/edit-new.png" onclick="getUser({{ user.UserID }})">
<img id="delete" src="/static/img/edit_remove.png" onclick="userdelete({{ user.UserID }})">
</td>
</tr>
{% endfor %}
</tbody>
</table>
2、js代码
$(function () {
//全选,设置chheckbox name='all' tbody id=tb
$("input[name=all]").click(function () {
if (this.checked) {
$("input[name=id]:checkbox").prop("checked", true);
//$("#tb :checkbox").prop("checked", true);
} else {
$("input[name=id]:checkbox").prop("checked", false);
//$("#tb :checkbox").prop("checked", false);
}
});
});
//单选 设置name=id
function userCheck(ths) {
if (ths.checked == false) {
$("input[name=all]:checkbox").prop('checked', false);
}
else {
var count = $("input[name='id']:checkbox:checked").length;
if (count == $("input[name='id']:checkbox").length) {
$("input[name=all]:checkbox").prop("checked", true);
}
}
}
//获取选中
function getSelect() {
var allData = new Array();
var num = 0;
$("input[name='id']:checkbox:checked").each(function(){
allData[num] = $(this).val();
num++;
});
alert(allData);
}