使用localStorage检索页面刷新时先前选中的复选框

Question

我有一个html代码，其中选中了复选框，并在按钮上单击了onclick，复选框的值将通过函数发送。 当用户选中一个复选框时，相应的儿童复选框也被选中。 如果我刷新页面，则要检索以前选中的复选框。 我尝试使用localStorage存储复选框值。

localStorage.setItem("check", check);

然后在另一个函数中尝试通过执行

    localStorage.getItem("check");
        if(check){
        $("input[name='favorites']").attr("checked", "checked");
$(check)
        .closest('li')
        .find('input:checkbox')
            .prop('checked', $(this).prop('checked') );
}

但这是行不通的。 我只需要检索先前在页面刷新时选中的复选框。

我完整的演示代码

html

<ul class="test_ex">
    <li>
        <input type="checkbox" id="chckBox" class="parent" /> <a class="ref">Fruits</a>

        <ul class="example">
            <li>
                <input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Apple </a>

            </li>
            <li>
                <input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Orange </a>

            </li>
        </ul>
        <ul class="test_ex_sample">
            <li>
                <input type="checkbox" id="chckBox" class="parent" /> <a class="ref">Birds</a>

                <ul class="example">
                    <li>
                        <input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Peacock </a>

                    </li>
                    <li>
                        <input type="checkbox" id="chckBox" class="child" /> <a class="ref">Parrot </a>

                    </li>
                </ul>
                <ul class="example">
                    <li>
                        <input type="checkbox" id="chckBox" class="parent" /> <a class="ref"> Food </a>

                        <ul class="example">
                            <li>
                                <input type="checkbox" id="chckBox" class="child" /> <a class="ref">Bread </a>

                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<input type="button" id="testB" value="OK" />

javascript

$(function() {
    // Clicking on an <input:checkbox> should check any children checkboxes automatically
    $('input:checkbox').change( fnTest );

    // Clicking the OK button should run submit(), pop up displays all checked boxes
    $('#testB').click( submit );
});


function fnTest(check) {
    // Set all child checkboxes to the same value
    $(check)
        .closest('li')
        .find('input:checkbox')
            .prop('checked', $(this).prop('checked') );
}

function submit(check) {
    // When you click OK, dipslay the label for each checkbox
    var checked = [];
    $('input:checkbox:checked').each(function() {
        checked.push( $(this).next('a').text() );
    });
    alert("You have selected:\n\n - " + checked.join("\n - ") );
}

更新小提琴

Answer 1

像这样进行获取时将localStorage分配给变量

var check = localStorage.getItem("check");

编辑：

         $(function() {
// Clicking on an <input:checkbox> should check any children checkboxes automatically
$('input:checkbox').change( fnTest );

// Clicking the OK button should run submit(), pop up displays all checked boxes
$('#testB').click( submit );

display();
    });


    function fnTest(e) {
   // Set all child checkboxes to the same value
    alert($(this).attr("id"));
     localStorage.setItem("prevChecked",$(this).attr("id"));
     localStorage.setItem("checkedState",$(this).prop('checked'));
   $(this)
    .closest('li')
    .find('input:checkbox')
        .prop('checked', $(this).prop('checked') );
 }


function submit(check) {
// When you click OK, dipslay the label for each checkbox
 var checked = [];
$('input:checkbox:checked').each(function() {
    //localStorage.setItem("prevChecked",check);
    checked.push( $(this).next('a').text() );
});
alert("You have selected:\n\n - " + checked.join("\n - ") );
}
    function display(){
     if(localStorage.getItem("checkedState")!="false")
    {
    var test=localStorage.getItem("prevChecked");
   alert(test);
    alert($("#"+test).closest('li').html());
    $("#"+test).closest('li')
    .find('input:checkbox')
        .prop('checked', localStorage.getItem("checkedState") );
        }
    }

链接到更新的小提琴： http : //jsfiddle.net/3a050r6r/36/

Answer 2

尝试更改此代码，看看它是否适合您：

$(function() {
  // Clicking on an <input:checkbox> should check any children checkboxes automatically
  $('.ref').each(function(){
    var $t = $(this);
    $t.siblings('input').attr('data-name',$t.text());
  });

  $('input:checkbox').change( fnTest );

  // Clicking the OK button should run submit(), pop up displays all checked boxes
  $('#testB').click( submit );

  display();
});

function fnTest(e) {
  // Set all child checkboxes to the same value
  $(this)
    .closest('li')
    .find('input:checkbox')
        .prop('checked', $(this).prop('checked') );
}

function submit(check) {
  // When you click OK, dipslay the label for each checkbox
  var checked = [];
  $('input:checked').each(function() {
     checked.push( $(this).attr('data-name'));
  });
  alert("You have selected:\n\n - " + checked.join("\n - ") );
  localStorage.setItem("prevChecked",checked.join('|'));
}

function display(){
  var test=localStorage.getItem("prevChecked");
  alert(test);
  var results = test.split('|');
  for (var r=0, len=results.length; r<len; r++ ) {
    $('input[data-name="'+results[r]+'"]').prop('checked', true);
  }
}

更新，请参见此小提琴： http : //jsfiddle.net/3a050r6r/6/