嗨,我是javascript新手。
我有滑动其他输入的复选框,如果输入复选框选中,我想在刷新页面后保持选中该复选框,并显示其他输入
javascript:
function validateSitec(){
if (document.getElementById('sitecheck').checked){
$('#sitecheck').prop('checked', true);
$('#closedmsg').slideDown();
}else{
$('#closedmsg').slideUp();
$("#sitecheck").removeProp("checked").checkboxradio("refresh");
}
}
这是我的输入:
<label for="sitecheck">
<span style="font-weight:bold;">close site+ msg:</span>
</label>
<input name="" type="checkbox" id="sitecheck" onclick="validateSitec()" /><span style="font-weight:bold;">click to activate msg</span><br>
<input type="text" name="closedmsg" id="closedmsg" style="width:440px;height:120px;display:none;" value="enter closed msg.."/>
我想如果被检查,请继续检查。。并且在刷新页面后不会更改,然后在未选中时恢复正常,并在刷新页面时未选中。。
我应该使用php使其在使用javascript检查后不会发生更改吗?
编辑:
感谢大家的帮助功劳归于:雷永林。
任何喜欢使用它的人的工作代码:
先下载:https://github.com/carhartl/jquery-cookie
然后使用这个代码工作真棒:
JavaScript:
<script type="text/javascript">
function validateSitec(){
if (document.getElementById('sitecheck').checked){
$('#sitecheck').prop('checked', true);
$('#closedmsg').slideDown();
$.cookie("cookieChecked", "#sitecheck");
}else{
$('#closedmsg').slideUp();
$("#sitecheck").removeProp("checked");
$.cookie("cookieChecked","");
}
}
$(function(){
var cookieChecked = $.cookie("cookieChecked");
if(cookieChecked){
$('#sitecheck').prop('checked', true);
$('#closedmsg').show();
}else{
$("#sitecheck").removeProp("checked");
$('#closedmsg').hide();
}
})
</script>
html输入:
<label for="sitecheck">
<span style="font-weight:bold;">close site temp:</span>
</label>
<input name="" type="checkbox" id="sitecheck" onclick="validateSitec()" /><span style="font-weight:bold;">close site and add message</span><br>
<input type="text" name="closedmsg" id="closedmsg" style="width:440px;height:120px;display:none;" value="<?php echo $data['csitemsg']; ?>" />
这又是一次完美的工作。
您可以使用cookie在页面刷新时维护数据。我注意到您在代码中使用了JQuery。这里有一个JQuery-Cookie
插件,它可以让你使用cookie来管理页面刷新中的数据。
https://github.com/carhartl/jquery-cookie
转到Usage部分,您将了解如何从插件中轻松创建、读取、删除和设置过期。
设置cookie:将选中的元素保存在cookieChecked 中
function validateSitec(){
if (document.getElementById('sitecheck').checked){
$('#sitecheck').prop('checked', true);
$('#closedmsg').slideDown();
$.cookie("cookieChecked", "#sitecheck");
}else if(document.getElementById('closedmsg').checked){
$('#closedmsg').slideUp();
$("#sitecheck").removeProp("checked").checkboxradio("refresh");
$.cookie("cookieChecked", "#closedmsg");
} else {
$.cookie("cookieChecked","");
}
}
页面加载时
$(function(){
var cookieChecked = $.cookie("cookieChecked");
if(cookieChecked){
$(cookieChecked).trigger("click");
}
})
我使用jquery cookie插件:https://github.com/carhartl/jquery-cookie
识别页面刷新事件,并将复选框的状态存储在缓存或本地存储中。根据检查状态完成刷新后,执行逻辑
试试这个,不要使用额外的插件:
<script>
function validateSitec(){
if (document.getElementById('sitecheck').checked){
$('#sitecheck').prop('checked', true);
$('#closedmsg').slideDown();
document.cookie="sitecheck=site_checked";
}else{
$('#closedmsg').slideUp();
$("#sitecheck").removeProp("checked").checkboxradio("refresh");
document.cookie="sitecheck=site_unchecked";
}
}
</script>
文档准备就绪时:
<script>
$(function(){
var kuki=read_cookie("sitecheck");
if(kuki=="site_checked"){
$('#sitecheck').prop('checked', true);
$('#closedmsg').slideDown();
}else{
$('#closedmsg').slideUp();
$("#sitecheck").removeProp("checked").checkboxradio("refresh");
}
});
</script>
读取cookie
<script>
function read_cookie(name) {
var name = name + "=";
var kukiAri = document.cookie.split(';');
for(var i=0;i < kukiAri.length;i++) {
var kuki = kukiAri[i];
while (kuki.charAt(0)==' ') kuki = kuki.substring(1,kuki.length);
if (kuki.indexOf(name) == 0)
return kuki.substring(name.length,kuki.length);
}
return null;
};
</script>