刷新頁面后javascript保持選中復選框

Question

嗨，我是javascript新手。

我有一個SlideDown其他輸入的復選框，我想保持該復選框的狀態，如果輸入復選框已選中，則刷新頁面后顯示其他輸入

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.."/>

我想如果保持選中狀態..並且在刷新頁面后不會更改，則當未選中時返回正常狀態，並在刷新頁面時未選中。

與javascript檢查后，我應該使用php使其保持不變嗎？

編輯：

感謝大家給予的幫助：雷永林。

任何喜歡使用它的人的工作代碼：

首先下載： 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']; ?>" />

此工作再次完美。

Answer 1

您可以使用cookie通過使用cookie來維護頁面刷新時的數據。 我注意到您在代碼中使用了JQuery。 這是一個JQuery-Cookie插件，可讓您使用Cookie來管理頁面刷新中的數據。

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

轉到用法部分，您將找到如何輕松創建，讀取，刪除和設置插件過期的方法。

Answer 2

識別頁面刷新事件，並將復選框的狀態存儲在緩存或本地存儲中。 根據檢查的狀態完成刷新后，執行邏輯

Answer 3

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

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

閱讀餅干

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