页面重新加载/刷新ajax后保持复选框状态

Question

I am working around a script that keeps one or multiple checkbox values checked on page reloaded or refreshed. The code below was executed to maintain the checkboxes values but it's not working. Any help will be appreciated.

<script>
            function onClickBox() {
                let checked=$("#check").is(":checked");
                localStorage.setItem("checked", checked);

            }
            function onReady() {

                let checked="true"==localStorage.getItem("checked");
                $("#check").prop('checked', checked);
                $("#check").click(onClickBox);
            }
            $(document).ready(onReady);

</script>

This line of code return '<input type="checkbox" id="check" href="#"' + 'order_id="'+ data + '">Yes</>'; allows admin to check a checkbox, after which the code takes the ID and then runs the check_payment.php that has the query that inserts yes to that ID row.

 aoColumnDefs: [
           {
                aTargets: [6],
                mData: "userId",
                mRender: function (data, type, full) {
                     return '<input type="checkbox"  id="check" href="#"' + 'order_id="'+ data + '">Yes</>';
                    //return '<button href="#"' + 'order_id="'+ data + '">Yes</button>';
                }

            }
         ],
         language: {
            url: 'https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/English.json'
            }
});
$('#example').on( 'click', 'input:checkbox', function () {
            var data = table.row( $(this).parents('tr') ).data();
            var order_id = data['order_id'];
            console.log(order_id);
            $.ajax({
                type: "POST",
                url: 'check_payment.php',
                data: "order_id=" + order_id,   
            });
        } );

Answer 1

Here's a VanillaJS approach. We have document.querySelector now, so in my view, jQuery has been depreciated for a while. As far as I can tell your logic is solid, so I can only assume it's one of the jQuery calls that's breaking, and I honestly don't know which one.

// get element #check
var checkbox = window.check;

// checking and setting
isChecked = () => localStorage.getItem("checked") == "true";
setCheck = (v) => checkbox.checked = v;

// event handlers
onClickBox = () => localStorage.setItem("checked", checkbox.checked);
onReady = () => setCheck(isChecked());

// bindings
checkbox.addEventListener("click", onClickBox);
document.addEventListener("load", onReady);

Edit: I think what might be happening is the onLoad handler (or onReady, with jQuery) is never firing because the code is embedded in the body. If the script is in the head, use the eventHandler; if the script is in the body, just call onReady() after setting the click handler for the checkbox.