尝试存档（要做）的操作：将复选框选择保存在localStorage >>中，这样用户就不必一次又一次地选中所有复选框。

问题：我能够将选择保存在localStorage中，但是复选框未显示onload，该机制似乎也被颠倒了，而选中的复选框被捕获而未选中等

我想念什么吗？

这是我的代码 

 // issue: if localStorage saves the checkbox, the input field will not display $('input[type="checkbox"]').click(function () { var inputValue = $(this).attr("value"); $("." + inputValue).toggle(); }); function save() { var checkbox = document.getElementById('activityTitleCb'); localStorage.setItem('activityTitleCb', checkbox.checked); } function load() { var checked = JSON.parse(localStorage.getItem('activityTitleCb')); document.getElementById("activityTitleCb").checked = checked; } function wis() { location.reload(); localStorage.clear() } load(); 
 .searchFilterBox{ display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="chiller_cb"> <input id="activityTitleCb" type="checkbox" class="searchFilterCb" value="activityTitleCb"> <label for="activityTitleCb"> add my name!</label> </div> <br> <div class="col-sm-2 activityTitleCb searchFilterBox"> <input class="form-control input-sm" placeholder="add your name" id="inputsm" type="text"> </div> <br> <input type="button" id="ReserveerButton1" value="save checkbox choices" onclick="save()"/> <input type="button" id="Wisbutton1" value="delete" onclick="wis()"/>

#1楼 票数：0

在函数加载中，尝试console.log（选中）以确保该值为布尔值。 您也可以尝试打开浏览器控制台以查看本地存储中存储了什么值。

#2楼 票数：0

这是一个解决方案。 您不需要按“保存”按钮，因为它会自动将其保存到localStorage。

https://codepen.io/anon/pen/PyKJQq 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// issue: if localStorage saves the checkbox, the input field will not display

    $(() =>{

         $('input[type="checkbox"]').change(function() {
             if (this.checked) {
                 localStorage.setItem('activityTitleCb', true);
             }    else {

                localStorage.setItem('activityTitleCb', false);
             }
    });

 function save() {
        var checkbox = document.getElementById('activityTitleCb');
        localStorage.setItem('activityTitleCb', checkbox.checked);
      }

      function load() {
        var checked = localStorage.getItem('activityTitleCb') === undefined ? false : localStorage.getItem('activityTitleCb');
        checked = (checked === 'true');
        document.getElementById("activityTitleCb").checked = checked;

      }

      function wis() {
        location.reload();
        localStorage.clear()
      }

      load();
    })
</script>
<style>
        .searchFilterBox{
          display: none;
        }</style>
<div class="chiller_cb">
              <input id="activityTitleCb" type="checkbox" class="searchFilterCb" value="activityTitleCb">
              <label for="activityTitleCb"> add my name!</label>

            </div>


            <br>

    <div class="col-sm-2 activityTitleCb searchFilterBox">

            <input class="form-control input-sm" placeholder="add your name" id="inputsm" type="text">
          </div>


             <br>

                <input type="button" id="ReserveerButton1" value="save checkbox choices" onclick="save()"/>
                <input type="button" id="Wisbutton1" value="delete" onclick="wis()"/>

  ask by papapi translate from so

未解决问题？本站智能推荐：

1回复

设置并使用localStorage在表单编辑期间保留复选框选择

我有一个使用jqGrid的窗体的一部分的窗体。 本部分显示可以通过复选框选择的用户信息。 在审阅页面上，有一个用于编辑表单的选项，我试图在此过程中保留复选框的选择。 我正在尝试为此使用window.localStorage ，但是我不确定如何正确设置setItem。 我在loadCom
2回复

复选框选择

在此限制复选框数量的示例在此处 。 var limit = 3; $('input.single-checkbox').on('change', function(evt) { if ($(this).siblings(':checked').length >= limit) {
2回复

jQuery复选框选择器问题

给定一些标记，其中任意深度处都有一系列输入（复选框），我如何确定是否根据其值检查给定输入： 所以，我需要的是：给定root_node和一个输入value （例如val_2 ），我想确定是否选中了相应的复选框（root_node下面的某个地方）。
1回复

jQuery的复选框选择顺序问题

我有一个基本的背景图片和两个复选框。 我需要根据所选的复选框用正确的类替换背景图像（通过切换类）。 如果两个复选框都被选中，我需要它显示黑色背景。 http://jsfiddle.net/2k96D/6/ 当我以相同的顺序选择和取消选择时，我的提琴效果很好，但是，如果我以与选择它们的
1回复

使用jQuery的列显示/隐藏复选框选择

我正在.NET MVC项目中使用列过滤器。 我的要求是，在下拉列表控件中，所有表标题列名称都将与复选框绑定。 默认情况下，所有选项均处于选中状态。 当我从下拉列表中取消选择任何选项时，它将反映到表数据，并且该列将不会显示。 我编写了一些代码，但无法实现复选框功能。 请帮我。 如果有
2回复

使用复选框选择隐藏动态GoogleMap标记

我正在尝试为Google地图上的某些动态标记创建过滤器。 用户使用与每个标记类别相关的各种复选框选择来选择要过滤的标记。 我希望对当前代码有所建议，因为我希望自己与我的代码很接近。 我知道这里有很多类似的问题，尽管它们似乎都遵循了我未遵循的xml google map教程，并采用了JSO
1回复

在复选框选择上使用imgsrc创建div

我正在尝试创建一个change function ，该change function为每个选中的 checkbox创建一个div ，并且在未选中 div时也将其删除。 在这些新的div中，我也想发送复选框的img src 。 *注意**我目前所用的JS到我为止，第二个功能仅从选中的复选框
1回复

无法使用JQuery检测复选框选择

我正在尝试使用JQuery来检测何时选中一个复选框。 我正在使用的JS就像这样： HTML中的复选框： 在JS控制台中，出现错误： 我在这里做错了什么？