[英]Javascript, Function when checkbox unchecked div is hidden, remember on page refresh
我仍然有问题,我不知道如何解决。 感谢给出的答案,我对它的外观有所了解,但我不知道如何使其工作。
我的javascript复选框代码有问题。
我有一个隐藏div的功能(我的其他文章: javascript,当右div隐藏时,左div必须为100%width )
但是,当我刷新页面时,该复选框将再次被选中,我阅读了一些有关cookie的内容,但我不知道该如何实现。
我的JavaScript代码:
$(function() {
$("#foo").on("click",function() {
if ($(this).is(':checked')) $('#checked-a').show('fast',function() {
$('#checked-b').css("width","60%");
$('#checked-a').css("width","38%");
}) ;
else $('#checked-a').show('fast',function(){
$('#checked-b').css("width","100%").show();
$('#checked-a').css("width","0%").hide();
});
});
});
我的HTML代码复选框:
<input type="checkbox" checked="checked" name="foo" id="foo" />
我的Div的:
<div class="content1" id="checked-b">
<%= button_to "Zoek", search_index_path, :method => :get, :class => 'contentlinks' %>
<%= button_to "Print", root_url, :class => 'contentlinks' %>
<%= button_to "Edit", root_url, :class => 'contentlinks' %>
<%= button_to "Add", root_url, :class => 'contentlinks' %>
<br>
<div class="spacing">
<%= yield %>
</div>
</div>
<div class="content2" id="checked-a">
谢谢。
刷新页面后,您的jQuery代码不执行,因为它取决于“点击”操作。
Web浏览器将看到checked =“ checked”,并且它将选中您的复选框。
您应该使用变量来帮助网络浏览器记住您的答案。
我会在您的网址中使用哈希来实现这一点。
请查看以下代码:
// set the state of your div as hash
window.location.hash = "#hide-div";
// now on document ready check the following
if(window.location.hash == '#hide-div') {
// do something to hide your div and uncheck your checkbox
}
if(window.location.hash == '#show-div') {
// do something to show your div and ucheck your checkbox
}
还有文档: https : //developer.mozilla.org/en/DOM/window.location
编辑:
$(function() {
$("#foo").on("click",function() {
if ($(this).is(':checked')) $('#checked-a').show('fast',function() {
$('#checked-b').css("width","60%");
$('#checked-a').css("width","38%");
window.location.hash = "#show-div";
}) ;
else $('#checked-a').show('fast',function(){
$('#checked-b').css("width","100%").show();
$('#checked-a').css("width","0%").hide();
window.location.hash = "#hide-div";
});
});
if(window.location.hash == '#show-div') {
// do something to hide your div and uncheck your checkbox
$("#foo").trigger('click');
}
});
如果您不希望默认情况下选中该复选框,请使用
<input type="checkbox" name="foo" id="foo" />
代替
<input type="checkbox" checked="checked" name="foo" id="foo" />
如果要在页面首次加载时检查复选框的状态,请添加此JavaScript位。
$(document).ready(function(){
if ($("#foo").is(':checked')){
$('#checked-b').css("width","60%");
$('#checked-a').css("width","38%");
} else {
$('#checked-b').css("width","100%");
$('#checked-a').css("width","0%").hide();
}
});
如果您希望用户的浏览器在每次用户访问您的站点时记住“ foo”复选框的状态,则可能需要读取cookie。 这是w3schools的JS Cookies指南
编辑
我不会声称这行得通,因为我还没有尝试过,也没有亲自使用过Cookie(但是我确实重新发现Google基本上可以解决所有问题。当您花半点钱就很容易了)努力)
$(document).ready(function(){
if (get_cookie( "fooIsChecked" ) == 1){
$('#foo').prop("checked", true);
$('#checked-b').css("width","60%");
$('#checked-a').css("width","38%");
} else {
$('#foo').prop("checked", false);
$('#checked-b').css("width","100%");
$('#checked-a').css("width","0%").hide();
}
$("#foo").on("click",function() {
if ($(this).is(':checked')){
set_cookie( "fooIsChecked", "1", 30 );
$('#checked-a').show('fast',function() {
$('#checked-b').css("width","60%");
$('#checked-a').css("width","38%");
}) ;
} else {
set_cookie( "fooIsChecked", "0", 30 );
$('#checked-a').show('fast',function(){
$('#checked-b').css("width","100%").show();
$('#checked-a').css("width","0%").hide();
});
}
});
});
function set_cookie ( cookie_name, cookie_value, lifespan_in_days, valid_domain ){
var domain_string = valid_domain ? ("; domain=" + valid_domain) : '' ;
document.cookie = cookie_name +
"=" + encodeURIComponent( cookie_value ) +
"; max-age=" + 60 * 60 * 24 * lifespan_in_days +
"; path=/" + domain_string;
}
function get_cookie ( cookie_name ){
var cookie_string = document.cookie;
if (cookie_string.length != 0) {
var cookie_value = cookie_string.match (
'(^|;)[\s]*' + cookie_name + '=([^;]*)' );
return decodeURIComponent ( cookie_value[2] ) ;
}
return '' ;
}
从网站向导修改的代码
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.