Question

我有多个具有唯一ID的复选框，这些是动态创建的，我需要在刷新页面时单击复选框进行检查。我使用下面的代码，但这会在刷新时检查所有复选框。

$(function(){
    var test = localStorage.input === 'true'? true: false;
    $('input').prop('checked', test || false);
});

$('input').on('change', function() {
    localStorage.input = $(this).is(':checked');
    console.log($(this).is(':checked'));
});

任何帮助都将不胜感激。

Answer 1

$(document).ready(function () {
    if (sessionStorage.getItem('checked-checkboxes') && $.parseJSON(sessionStorage.getItem('checked-checkboxes')).length !== 0)
    {
        var arrCheckedCheckboxes = $.parseJSON(sessionStorage.getItem('checked-checkboxes'));
        //Convert checked checkboxes array to comma seprated id
        $(arrCheckedCheckboxes.toString()).prop('checked', true);
    }
    $("input:checkbox").change(function () {
        var arrCheckedCheckboxes = [];
        // Get all checked checkboxes
        $.each($("input:checkbox:checked"), function () {
            arrCheckedCheckboxes.push("#" + $(this).attr('id'));
        });
        // Convert checked checkboxes array to JSON ans store it in session storage
        sessionStorage.setItem('checked-checkboxes', JSON.stringify(arrCheckedCheckboxes));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Checkbox 1: <input type="checkbox" id="chk1"> <br>
Checkbox 2: <input type="checkbox" id="chk2"> <br>
Checkbox 3: <input type="checkbox" id="chk3"> <br>
Checkbox 4: <input type="checkbox" id="chk4"> <br>
Checkbox 5: <input type="checkbox" id="chk5"> <br>

刷新页面后，保持动态创建的复选框

1 个答案: