Question

HTML code：

    <div class="wrap">
        <h3>Background Swap:</h3>
        <form action="" method="POST">
            <div id="checkbox-container">
                Shadowless background: <input type="checkbox" name="new_background" id="checker" <?php echo (isset($_POST['new_background']))? "checked='checked'": "";?>/><br /><br />
            </div>
            <input type="submit" name="submit" value="Upgrade Background" class="button" />
        </form>
    </div>

这将使复选框保持选中状态，但是当页面刷新或退出并返回时，将取消选中该复选框。因此，经过一些研究，我尝试了localStorage，但似乎还没有弄明白。

localStorage代码：

    var checkboxValue = JSON.parse(localStorage.getItem('checkboxValue')) || {};
    var $checkbox = $("#checkbox-container :checkbox");

    $checkbox.on("change", function(){
        $checkbox.each(function(){
            checkboxValue[this.id] = this.checked; 
        });
        localStorage.setItem("checkboxValue", JSON.stringify(checkboxValue));
    });

    //on page load
    $.each(checkboxValue, function(key, value){
        $("#" + key).prop('checked', value);
    });

我在localStorage代码周围有脚本标记，在实现这些代码后，我的复选框仍然没有被检查。

两个代码作为一个整体：

<div class="wrap">
<h3>Background Swap:</h3>
<form action="" method="POST">
    <div id="checkbox-container">
        Background Swap: <input type="checkbox" name="new_background"/>
    </div>
    <script>
        var checkboxValue = JSON.parse(localStorage.getItem('checkboxValue')) || {}
        var $checkbox = $("#checkbox-container :checkbox");

        $checkbox.on("change", function(){
            $checkbox.each(function(){
                checkboxValue[this.id] = this.checked; 
            });
            localStorage.setItem("checkboxValue", JSON.stringify(checkboxValue));
        });

        //on page load
        $.each(checkboxValue, function(key, value){
            $("#" + key).prop('checked', value);
        });
        </script>
        <input type="submit" name="submit" value="Upgrade Background" class="button"/>
</form>
</div>

我要感谢大家花时间帮助我找到问题的解决方案，最感谢@Pranav C Balan !!!查看完成的代码@ http://stackoverflow.com/a/44321072/3037257

Answer 1

我认为您的代码在表单元素加载之前正在执行，因此将其放在代码的末尾或使用document ready handler将其包装，以便仅在加载元素之后执行。如果您在元素$("#checkbox-container :checkbox")之前放置了代码，则不会选择任何内容，因为它尚未加载到DOM中。

还有一件事要做，在你的代码中，复选框没有任何id，所以为元素添加一个唯一的id以使其工作，因为JSON使用id值生成。

<div class="wrap">
  <h3>Background Swap:</h3>
  <form action="" method="POST">
    <div id="checkbox-container">
      Background Swap: <input type="checkbox" id="name" name="new_background" />
    </div>

    <input type="submit" name="submit" value="Upgrade Background" class="button" />
  </form>
  <script>
    var checkboxValue = JSON.parse(localStorage.getItem('checkboxValue')) || {}
    var $checkbox = $("#checkbox-container :checkbox");

    $checkbox.on("change", function() {
      $checkbox.each(function() {
        checkboxValue[this.id] = this.checked;
      });
      localStorage.setItem("checkboxValue", JSON.stringify(checkboxValue));
    });

    //on page load
    $.each(checkboxValue, function(key, value) {
      $("#" + key).prop('checked', value);
    });
  </script>
</div>

工作演示：FIDDLE

<script>
  // document ready handler
  // or $(document).ready(Function(){...
  jQuery(function($) {
    var checkboxValue = JSON.parse(localStorage.getItem('checkboxValue')) || {}
    var $checkbox = $("#checkbox-container :checkbox");

    $checkbox.on("change", function() {
      $checkbox.each(function() {
        checkboxValue[this.id] = this.checked;
      });
      localStorage.setItem("checkboxValue", JSON.stringify(checkboxValue));
    });

    //on page load
    $.each(checkboxValue, function(key, value) {
      $("#" + key).prop('checked', value);
    });
  });
</script>
<div class="wrap">
  <h3>Background Swap:</h3>
  <form action="" method="POST">
    <div id="checkbox-container">
      Background Swap: <input type="checkbox" id="name" name="new_background" />
    </div>

    <input type="submit" name="submit" value="Upgrade Background" class="button" />
  </form>

</div>

工作演示：FIDDLE

Answer 2

localStorage的替代方案，仅使用document.cookie：

$('input:checkbox').change(function() {
    saveCookies();
});

注册功能和实际功能：

function saveCookies() {
    var checkArray = [];
    $('input.comic-check').each(function() {
        if ($(this).is(':checked')) {
            checkArray.push(1);
        } else {
            checkArray.push(0);
        }
    });
    document.cookie = "checks=" + checkArray;
}

这是localStorage的替代方案，取决于您是否希望它持续更长时间

并检索已保存的（正在加载）

var checks = getCookie("checks");
if (checks != "") {
    checkArray = checks.split(',');
    //unchecks boxes based on cookies
    //also has backwards compatability provided we only append to the list in landing.ejs/generator.js
    for (var i = 0; i < checkArray.length; i++) {
        if (checkArray[i] == "0" && $('input.comic-check').length > i) {
            var checkBox = $('input.comic-check')[i];
            $(checkBox).prop('checked', false);
        }
    }
}
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

Answer 3

我会改变：

<?php echo (isset($_POST['new_background']))? "checked='checked'": "";?>

有：

<?php echo (isset($_POST['new_background']) && $_POST['new_background']=="on")? "checked" : "";?>

在内嵌HTML 中，您不需要将checked属性设为checked=checked。
只需checked即可。

JavaScript中使用

checked=checked以编程方式检查复选框。

修改
关于您的localStorage ...

我在CodePen
上为你做了一个例子
//on page load, check the appropriate checkboxes. var onloadChecks = JSON.parse(localStorage.getItem("checkboxValue")) $.each(onloadChecks, function(key, value){ $("#" + key).prop('checked', value); }); // ================ Saving checks // Checkboxes collection. var allCheckboxes = $("input[type='checkbox']"); // On change handler. allCheckboxes.on("change", function() { // Check how many checkboxes we have. var jsonCheckboxes = {}; console.log("There is "+allCheckboxes.length+" checkboxes."); // Building the json. for(i=0;i<allCheckboxes.length;i++){ console.log(allCheckboxes.eq(i).attr("id")); console.log(allCheckboxes.eq(i).is(":checked")); jsonCheckboxes[allCheckboxes.eq(i).attr("id")] = allCheckboxes.eq(i).is(":checked"); } console.log("jsonCheckboxes: "+JSON.stringify(jsonCheckboxes)); // Setting localStorage. localStorage.setItem("checkboxValue", JSON.stringify(jsonCheckboxes)); console.log("LocalStorage: "+ localStorage.getItem("checkboxValue") ); });

Answer 4

您需要检查复选框的三种情况

PHP将其设置为checked="checked"（已选中）
localStorage将其设为true（已选中）
所有其他情况都应该取消选中

所有你需要的是确保你检查复选框的前两种情况，然后默认它是未选中的，但在你的每一个你也取消选中复选框，因此忽略PHP部分（因为php设置为检查但localStorege设置它取消选中）

示例：https://jsfiddle.net/dalinhuang/efwc7ejb/

//on page load
$.each(checkboxValue, function(key, value) {
    if(value){
       $("#" + key).prop('checked', value);
    }
});

Answer 5

解决你的评论：my goal is to find something that will make my checkbox stays checked if the user choose to，这是让localStorage处理它的方法：

jQuery（3.2.1）

$(document).ready(function() {

var bground = localStorage.getItem('background'); // get the value if exists

if (bground == 'shadow') { // checkbox has been previously checked
    $('#checker').attr('checked', 'checked');
}
if (bground == 'shadowless') { // checkbox has been previously unchecked
    $('#checker').attr('');
}

$('#submit').submit(function() { // when form is submitted
    bground = localStorage.getItem('background'); // get the value in LS
    if($('#checker').is(':checked')) // is it checked or not ?
    { sh = 'shadow'; } else { sh = 'shadowless'; }
    localStorage.setItem('background', sh); // update LS with new value
}); 

});

HTML（将id="submit"添加到表单中）

<form action="" id="submit" method="POST">
  <div id="checkbox-container">
  Shadowless background: <input type="checkbox" name="new_background" id="checker" /><br />
  </div>
  <input type="submit" name="submit" value="Upgrade Background" class="button" />
</form>

这将使复选框保持选中状态，当刷新页面时，将根据用户之前的选择选中/取消选中复选框。

您也可以使用jQuery change函数而不是表单提交。只需修改一行：

$('#submit').submit(function() { // comment/delete this line
// to the one below
// $('#checker').change(function() { // uncomment this line

刷新页面后如何保持单个复选框保持选中状态？

5 个答案:

示例：https://jsfiddle.net/dalinhuang/efwc7ejb/