<script> $(function () { $('#id_select_th').change(function () { if ($(this).prop('checked')) { $('.id_select_td').prop("checked", true); } else { $('.id_select_td').prop("checked", false); } }); $('.id_select_td').change(function () { $('#id_select_th').prop("checked", $(":checkbox[name='id_select_list']").length == $(":checkbox[name='id_select_list']:checked").length ); }); }) </script>
下面的html代码仅供参考,如果需要测试的话,请自己添加数据
<!-- 核心代码 ~ 开始 --> <form action="{% url 'edits' %}" method="post"> {% csrf_token %} <button name="action" value="modify">批量修改</button> <table class="table table-striped table-hover table-bordered"> <!-- 表头 --> <thead> <tr> <th> <label for="id_select_th"></label> <input type="checkbox" id="id_select_th"> </th> <th>主键</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> </thead> <!-- 表内容 --> <tbody> {% for student in data_list %} <tr> <td> <label for="id_select_td"></label> <input type="checkbox" class="id_select_td" id="id_select_td" name="id_select_list" value="{{ student.pk }}"> </td> <td>{{ student.pk }}</td> <td>{{ student.name }}</td> <td>{{ student.age }}</td> <td>{{ student.gender }}</td> <td> <a href="{% url 'edit' student.pk %}{{ next }}" class="btn btn-primary btn-sm">编辑</a> <a href="" class="btn btn-danger btn-sm">删除</a> </td> </tr> {% endfor %} </tbody> </table> </form> <!-- 分页显示代码,注意循环体的循环对象是Pagination提供的data_list --> <div class="pull-right" style="padding-right: 10px"> <ul class="pagination pagination-sm"> {{ page_obj.page_html|safe }} </ul> </div> <!-- 核心代码 ~ 结束 -->