[英]How to keep checked state of checkbox after submit or page refresh in 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.