javascript - 在php中提交或页面刷新后如何保持复选框的选中状态?
问题描述
我想在页面刷新或提交后保持复选框的选中状态。在我的代码中,复选框在显示提交结果后位于下拉按钮内,但不保持选中状态。
这是我的html代码。
HTML:
<form method="GET" name="frm1" action="filter.php" id="form">
<div class="dropdown" id="myDropdown">
<button type="button" class="btn mr-2 mt-1 fillbtn" style="background-color:#494f4d; color: white; float:right; font-size:11px;" data-toggle="dropdown">
<i class="fa fa-filter" aria-hidden="true"></i> MOVIES
</button>
<div class="dropdown-menu dropdown-menu-right ml-4" style="background-color:black; width:100%; height:90%;">
<div class="row rounded rowtv" style="background-color:black; color:#d2d8d6;">
<h4 class="mb-3 mt-3 border-bottom" style=" margin:auto; color:#76ff03; font-family:bold;">Movies</h4>
</div>
<div class="row rounded rowtv" style="background-color:black; color:#d2d8d6;">
<div class="col-12 col-sm-6 col-md-6 col-lg-3 tvgen">
<h4>Genre</h4>
<div class="" style="display:inline-block; margin-left:15px;" >
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input ids" name="search[]" value="action">
<span class="custom-control-indicator"></span>
<span class="custom-control-description" >Action</span>
</label><br>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input ids" name="search[]" value="adventure">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Adventure</span>
</label><br>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input ids" name="search[]" value="animation">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Animation</span>
</label><br>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input ids" name="search[]" value="biography">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Biography</span>
</label><br>
</div>
</div>
</div>
</form>
解决方案
下面的代码使用 javascript 和 cookie 来保持提交或页面刷新时复选框的状态。
Javascript:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var chks = document.querySelectorAll('input[name="search[]"]');
for (var i = 0; i < chks.length; i++) {
if (getCookie('search[' + chks[i].value + ']') == 'true') {
chks[i].checked = true;
}
}
for (var i = 0; i < chks.length; i++) {
chks[i].addEventListener('click', function() {
document.cookie = "search[" + this.value + "]=" + this.checked + "; expires=Thu, 18 Dec 2018 12:00:00 UTC; path=/";
});
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
});
</script>
推荐阅读
- angular - @angular-devkit/build-angular (nodeSassConfig) 无法通过 npm 下载
- ms-access - Ms Access 2010 DMax 来自另一个表(MS Access 找不到您的表达式中引用的字段“|1”)
- django - 使用 Wagtail API 从页面 slug 返回所有字段
- php - 使用 PHP 在 FTP 帐户上打开文本文件
- python - 如何将 buildbot 属性转换为字符串值
- c - 这个指定的约束是什么意思
- php - 过滤时的 Laravel 雄辩查询
- html - 两个三角形组成一个矩形
- ios - 如何缩短选择和移动组件的触摸时间?(使用 UICollectionViewDragDelegate)
- javascript - 正则表达式 - 仅完整的单词而不是特定字符之后