Question

刷新页面后，我无法坚持复选框。

Answer 1

您需要使用Cookie ...一旦用户点击复选框，将其状态存储到Cookie中，只需在页面加载时获取Cookie值，以预先设置复选框，就像之前选择的那样。

<强> HTML

MEM_COMMIT

获取复选框值并从中制作Cookie

<div>
  <label for="option1">Option 1</label>
  <input type="checkbox" id="option1">
</div>
<div>
  <label for="option2">Option 2</label>
  <input type="checkbox" id="option2">
</div>
<div>
  <label for="option3">Option 3</label>
  <input type="checkbox" id="option3">
</div>
<button>Check all</button>

读取Cookie以预先填充的功能

var checkboxValues = {};
$(":checkbox").each(function(){
  checkboxValues[this.id] = this.checked;
});
$.cookie('checkboxValues', checkboxValues, { expires: 7, path: '/' })

Working Fiddle

Answer 2

您必须在服务器端执行此操作。使用PHP，ASP.NET或您使用的任何东西。

这是唯一的方法。

或，如果您的网站只是客户端，那么您必须在没有任何页面刷新的情况下实施它。

Answer 3

我是怎么做到的：

    <html>

<input type="checkbox" <?php echo file_get_contents(".cktest"); ?> onclick="getFileFromServer('write_ckfile.php?target=.cktest&value='+this.checked, function(text){ show_write(text)});"> cktest with php<br/>


<!-- with ajax read the checked attribut from file -->
<input id="withajax" type="checkbox" onclick="getFileFromServer('write_ckfile.php?target=.cktest&value='+this.checked, function(text){ show_write(text)});"> cktest with ajax<br/>


<script>
function getFileFromServer(url, doneCallback) {
    var xhr;

    xhr = new XMLHttpRequest();
    xhr.onreadystatechange = handleStateChange;
    xhr.open("GET", url, true);
    xhr.send();

    function handleStateChange() {
        if (xhr.readyState === 4) {
            doneCallback(xhr.status == 200 ? xhr.responseText : null);
        }
    }
}

function show_write(text) {
  //alert(text);
}


// 
getFileFromServer(".cktest", function(x) { document.getElementById("withajax").checked=x;} );

</script>

</html>

和文件write_ckfile.php：

    <?php
$strtarget=$_GET['target'];


$status=$_GET['value']=="true"?"checked":"";
file_put_contents($strtarget, $status );



?>

我希望这会有所帮助。 MiKL〜

如何在页面重新加载后保持复选框检查状态？

3 个答案: