jquery实现checkbox的单选和全选
一、思路
全选：判断“全选”checkbox的状态，如果选中则把tbody下所有的checkbox选中,反之
单选：主要是判断有没有全选，如果不是选中状态就把全选的checkbox状态设置为false,如果是选中就拿所有选中状态下“name=id”的chekbox和所有‘’name=id"的数量去比较，如果一样表示全选了，设置全选的chekbox为选中状态，反之。
二、代码
1.css部分，直接搬运的django项目里面的。
<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部分,name和id都可以根据实际修改
$(function () { ???//全选,设置chheckbox name=‘all‘ tbody id=tb ???$("input[name=all]").click(function () { ???????if (this.checked) { ???????????$("#tb :checkbox").prop("checked", true); ???????} else { ???????????$("#tb :checkbox").prop("checked", false); ???????} ???});});//单选 设置name=idfunction 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); ???????} ???}}Django框架---jquery实现checkbox的单选和全选
原文地址：https://www.cnblogs.com/sunxiuwen/p/9757125.html