[英]If Checkbox is Checked Keep DIV hidden even on page reload
我有滑軌表格。 當選中一個復選框(數據庫中為true)時,我想使div隱藏。 我找到了其他解決方案,但在重新加載頁面時,它再次出現,如果選中或為true,我想使div隱藏。
<div class="form-group">
<%= form.check_box :tos_checkbox, class: "terms_of_services" %>
<%= form.label :tos_checkbox, "Agree to TOS" %>
</div>
<div id="hide_if_above_checked">
Do You Agree to Our TOS
</div>
我知道此腳本將不起作用,但是一直在嘗試幾個不同的示例來解決我的問題。
$(function () {
$('.terms_of_services').change(function () {
if(checkbox.checked == true){
document.getElementById("hide_if_above_checked").setAttribute("d-none");
}else{
document.getElementById("hide_if_above_checked").removeAttribute("d-none");
}
});
});
要保留數據,您需要使用window.localStorage
, window.sessionStorage
或document.cookie
您的后端甚至可以訪問Cookie
從db調用復選框值並檢查渲染時間
<%if @variable_of_current_model.tos_checkbox != 'true' %>
<div id="hide_if_above_checked">
Do You Agree to Our TOS
</div>
<% end %>
div#hide_if_above_checked
僅在數據庫不正確時顯示。
您可以在頁面加載時獲取復選框的值。
if ($(".terms_of_services").is(':checked')){
$("#some-div-box").hide();
}else{
$("#some-div-box").show();
}
這樣,如果選中了復選框,則可以隱藏div。
添加到您的CSS
.hidden-div {
display: none;
}
接着
<div id="hide_if_above_checked" class="<%= 'hidden-div' if tos_checkbox %>">
Do You Agree to Our TOS
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.