django中如何通过js实现翻页后仍然保持复选框的勾选状态

Question

如题，如何保持checkbox的勾选状态
sr_list.html

<div class="container-fluid" style="margin-top:5px;">
    <div style="width:60%;">
        <form method="get">
        <div class="input-group">
            <input type="text" name="q" class="form-control" placeholder="输入关键字以搜索数据并分析">
            <span class="input-group-btn">
            <button class="btn btn-default" type="submit">查询</button>
            </span>
        </div>
        </form>
    </div>
    <div style="margin-top:10px;overflow-x: scroll;">
        <form method="post">
            {% csrf_token %}
            <table class="table table-bordered">
             <thead>
                 <tr>
                     <th>
                        <button class="btn btn-default" style="height:25px;width:50px;">分析</button>
                     </th>
                 {% for i in queryset.0.keys %}
                     <th>{{ i }}</th>
                 {% endfor %}
                 </tr>
             </thead>
             <tbody>
             {% for item in queryset %}
                 <tr id="list">
                     <td><input type="checkbox" value="{{ item.id }}" onclick="check()" class="chb"></td>
                     {% for i in item.values %}
                     <td>{{ i }}</td>
                     {% endfor %}
                 </tr>
             {% endfor %}
             </tbody>
         </table>
         <div style="color:blue;">**默认显示前50条数据</div>
         <div style="color:red;">**若修改表结构后查询不到数据请先前往数据编辑页面添加数据<a href="/sr/edit/">点此前往</a></div>
        </form>
    </div>
    <ul class="pagination">
        {{ page_string }}
    </ul>
</div>
<script>
    function check(){
         var num=0;
         var len=document.querySelectorAll('.chb');
         len.forEach(input=> {
            if(input.checked){
                input.name = 'b';
            }
         })
         console.log(len)
     }
</script>

django后端视图函数

#数据查询
def sr2(request):
    search = request.GET.get('q')
    ii = list(request.session["info"].values())[0]
    name = []
    name.append('sr' + str(ii))
    kwargs = {
        "host": "localhost",
        "port": 3306,
        "user": "root",
        "passwd": "10868325",
        "database": "liuxd",
        "charset": "utf8",
        "cursorclass": pymysql.cursors.DictCursor
    }
    db = pymysql.connect(**kwargs)
    cur = db.cursor()
    sql0 = 'select * from ' + name[0] + ' limit 50;'
    cur.execute(sql0)
    ###分析
    bd = request.POST.getlist('b')
    new_numbers = []
    for n in bd:
        new_numbers.append(int(n))
    if len(bd)==1:
        sql00 = "select * from " + name[0] + " where id=" + str(bd[0]) + ";"
        cur.execute(sql00)
        obj = cur.fetchall()
        return render(request, 'sr_list4.html', {"obj":obj})
    if len(bd)>=2:
        sql11 = "select * from " + name[0] + " where id in" + str(tuple(new_numbers)) + ";"
        cur.execute(sql11)
        obj = cur.fetchall()
        return render(request, 'sr_list4.html', {"obj": obj})
    fields = cur.description
    head = []
    for field in fields:
        head.append(field[0])
    if search:
        sql1 = "select * from " + name[0] + " where concat (" + ",".join(head) + ") like " + "'%"+search+"%'" + ";"
        cur.execute(sql1)
        queryset = cur.fetchall()
    else:
        cur.execute(sql0)
        queryset = cur.fetchall()
    cur.close()
    db.close()
    #print(queryset) #[{'id': 1, 'insect_name': '稻纵卷叶螟', 'crop': '水稻', 'harm_days': 7}, {'id': 2, 'insect_name': '棉蚜', 'crop': '棉花', 'harm_days': 5}]
    #print(type(queryset))
    page_object = Pagination(request, queryset)
    context = {"queryset": page_object.page_queryset,
               "page_string": page_object.html()
               }
    return render(request, 'sr_list2.html', context)

如有帮助 一定采纳！

Answer 1

以下回答引用自chatGpt, 有用的话，请采纳哇，这对我很重要！！！
要实现翻页后仍然保持复选框的勾选状态，可以通过以下步骤进行：

1. 给每个复选框设置一个唯一的ID，可以使用模型中的ID字段或者其他唯一的字段来进行设置。
2. 在复选框被勾选时，使用JavaScript将复选框的状态保存到浏览器的本地存储中。
3. 在页面加载时，检查本地存储中是否存在已勾选的复选框，如果存在，则将这些复选框的状态设置为勾选状态。

下面是一个示例代码，使用了jQuery来简化代码：

<script>
    $(document).ready(function() {
        // 读取本地存储中的已选中复选框的ID列表
        var selectedIds = JSON.parse(localStorage.getItem('selectedIds')) || [];

        // 根据已选中的ID设置复选框的勾选状态
        $('.chb').each(function() {
            var id = $(this).val();
            if (selectedIds.indexOf(id) != -1) {
                $(this).prop('checked', true);
            }
        });

        // 在复选框被勾选时，保存ID到本地存储中
        $('.chb').change(function() {
            var id = $(this).val();
            if ($(this).prop('checked')) {
                selectedIds.push(id);
            } else {
                selectedIds.splice(selectedIds.indexOf(id), 1);
            }
            localStorage.setItem('selectedIds', JSON.stringify(selectedIds));
        });
    });
</script>

在以上示例中，我们首先在页面加载时，读取本地存储中保存的已选中的复选框的ID列表，并根据这个列表设置复选框的勾选状态。接着，在每个复选框的change事件中，如果复选框被勾选，我们将这个复选框的ID添加到已选中的ID列表中，并保存到本地存储中；如果复选框被取消勾选，则从已选中的ID列表中移除这个ID，并重新保存到本地存储中。

注意，在以上示例中，我们使用了JSON.parse和JSON.stringify方法来将JavaScript对象和JSON字符串之间进行转换。在使用本地存储时，需要将JavaScript对象转换为JSON字符串进行存储，并在读取时将JSON字符串转换为JavaScript对象进行操作。