javascript在刷新页面后保持复选框选中答案

【问题标题】：javascript keep checkbox checked after refresh pagejavascript在刷新页面后保持复选框选中
【发布时间】：2013-08-17 07:44:14
【问题描述】：

嗨，我是 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 来存储选中了哪个复选框

标签： php javascript jquery

【解决方案1】：

您可以使用 cookie 来维护您在页面刷新时使用 cookie 的数据。我注意到您在代码中使用了 JQuery。这是一个JQuery-Cookie 插件，可让您使用 cookie 在页面刷新期间管理数据。

https://github.com/carhartl/jquery-cookie

转到使用部分，您会发现如何通过插件轻松创建、读取、删除和设置过期。

【讨论】：

【解决方案2】：

设置 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

【讨论】：

当我取消选中它的保持 bieng 检查和想法时工作 exept？
没有检查时重置 cookie 值
好的，我修复了代码，任何编辑我的问题，所以任何人都可以使用它，谢谢！

【解决方案3】：

识别页面刷新事件并将复选框的状态存储在缓存或本地存储中。根据检查状态完成刷新后，执行您的逻辑

【讨论】：

【解决方案4】：

试试这个，不要使用额外的插件：

<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>

【讨论】：