如题，如何保持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)
如有帮助 一定采纳！
以下回答引用自chatGpt, 有用的话，请采纳哇，这对我很重要！！！
要实现翻页后仍然保持复选框的勾选状态，可以通过以下步骤进行：
下面是一个示例代码，使用了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对象进行操作。
该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下。
要实现翻页后保持复选框的勾选状态，可以通过以下步骤实现：
1、 将选中的复选框的value值存储在一个数组中，例如：
function check() {
var checkedArr = []; // 用于存储选中的复选框的value值
var checkboxes = document.querySelectorAll('.chb');
checkboxes.forEach(function(checkbox) {
if (checkbox.checked) {
checkedArr.push(checkbox.value);
}
});
document.querySelector('#checkedArr').value = checkedArr.join(',');
}
在这个函数中，我们首先定义了一个数组用于存储选中的复选框的value值。然后我们通过querySelectorAll方法获取到所有的复选框，通过遍历所有的复选框，将选中的复选框的value值存储在数组中。最后，我们将这个数组的值赋给一个隐藏的input元素的value属性。
2、 在表单中添加这个隐藏的input元素，并将其name属性设置为“checkedArr”。
<form method="post">
{% csrf_token %}
<input type="hidden" id="checkedArr" name="checkedArr" value="">
<!-- 其他表单元素 -->
</form>
3、 在后端视图函数中，获取这个数组的值，并将这些值对应的复选框选中。
def sr2(request):
# 其他代码
if request.method == 'POST':
checkedArr = request.POST.get('checkedArr').split(',')
queryset = page_object.page_queryset
for item in queryset:
if str(item['id']) in checkedArr:
item['checked'] = 'checked'
else:
queryset = page_object.page_queryset
context = {"queryset": queryset,
"page_string": page_object.html()
}
return render(request, 'sr_list2.html', context)
在这个函数中，我们首先判断请求的方法是否为POST，如果是POST请求，则获取到隐藏的input元素的值，并将这些值对应的复选框选中。我们通过遍历查询结果集中的每一项，判断这个项的id是否在数组中，如果在，则给这个项添加一个checked属性，值为“checked”。最后，将查询结果集和分页字符串传递给模板渲染。
如果以上回答对您有所帮助，点击一下采纳该答案～谢谢
前端模板添加两个属性one和two, 分别代表一级和二级菜单
{% for menu in menus %}
<div class="row" style="margin: 0">
<div class="checkbox one"...>
{% for child in menu.children.all %}
<div class="checkbox col-sm-offset-1 two"...>
{% endfor %}
</div>
{% endfor %}
// 复选框逻辑
// 点击一级菜单，二级菜单联动
// 注意要在一级菜单中class属性中加上one，二级菜单中加上two
// 给带有one属性的所有checkbox加上这个函数
$('div.checkbox.one').each(function () {
let $this = $(this);
$this.find(':checkbox').click(function () {
if ($(this).is(':checked')) {
// 如果点击checkbox是让其被选中,
// 则让其所有的子选项全部选中
$this.siblings('div.checkbox.two').find(':checkbox').prop('checked', true)
} else {
// 否则代表取消选中checkbox,
// 则其所有的子选项也全部取消
$this.siblings('div.checkbox.two').find(':checkbox').prop('checked', false)
}
})
});
// 点击二级菜单，一级菜单联动
// 给带有two属性的所有checkbox加上这个函数
$('div.checkbox.two').each(function () {
let $this = $(this);
$this.find(':checkbox').click(function () {
if ($(this).is(':checked')) {
// 如果点击checkbox是让其被checked,
// 则检查其他子选项是否还有unchecked的
if (!$this.siblings('div.checkbox.two').find(':checkbox').is(':checked')) {
// 如果有,就让父选项变成indeterminate（不确定的）状态
$this.siblings('div.checkbox.one').find(':checkbox').prop('indeterminate', true)
}else{
// 如果全都被checked,就移出父选项的indeterminate状态,
$this.siblings('div.checkbox.one').find(':checkbox').prop('indeterminate', false);
// 然后让父选项被checked
$this.siblings('div.checkbox.one').find(':checkbox').prop('checked', true)
}
} else {
// 否则代表取消选中checkbox,
// 则判断所有的子选项中是否仍有被checked的
if ($this.siblings('div.checkbox.two').find(':checkbox').is(':checked')) {
// 如果有, 就让父选项变成indeterminate（不确定的）状态
$this.siblings('div.checkbox.one').find(':checkbox').prop('indeterminate', true)
}else {
// 如果全都被checked,就移出父选项的indeterminate状态,
$this.siblings('div.checkbox.one').find(':checkbox').prop('indeterminate', false);
// 然后移出父选项的checked状态
$this.siblings('div.checkbox.one').find(':checkbox').prop('checked', false)
}
}
})
});
参考文档:如何实现checkbox的第三种状态?