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

Question

页面刷新后，我无法保持选中的复选框 。

Answer 1

为此，您需要使用cookie。用户单击复选框后，将其状态存储到cookie中，然后只需在页面加载时获取cookie值，就可以像以前选择复选框一样预先填充复选框。

的HTML

<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: '/' })

读取cookie以在加载时预填充的功能

function repopulateCheckboxes(){
  var checkboxValues = $.cookie('checkboxValues');
  if(checkboxValues){
    Object.keys(checkboxValues).forEach(function(element) {
      var checked = checkboxValues[element];
      $("#" + element).prop('checked', checked);
    });
  }
}

工作小提琴

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 个解决方案

解决方案1
3 2015-07-28 09:14:35

解决方案2
0 2015-07-28 09:14:13

解决方案3
0 2016-04-16 23:39:54

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

问题描述

3 个解决方案

解决方案1 3 2015-07-28 09:14:35

解决方案2 0 2015-07-28 09:14:13

解决方案3 0 2016-04-16 23:39:54

解决方案1
3 2015-07-28 09:14:35

解决方案2
0 2015-07-28 09:14:13

解决方案3
0 2016-04-16 23:39:54