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

Question

我有一个 html 代码，其中选中了复选框，然后单击按钮，将复选框的值发送到函数。当用户选中复选框时，相应的子复选框也会被选中。如果我刷新页面，我想检索之前选中的复选框。我尝试使用 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 - ") );
}

Updated Fiddle

Answer 1

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

$(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);
  }
}

已更新看看这个 fiddle : http://jsfiddle.net/3a050r6r/6/