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

时间:2020-01-10 07:57:55

标签: javascript ajax

我正在处理一个脚本,该脚本可重新加载或刷新页面上选中的一个或多个复选框值。执行以下代码来维护复选框的值,但是它不起作用。任何帮助将不胜感激。

<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>

此行代码return '<input type="checkbox" id="check" href="#"' + 'order_id="'+ data + '">Yes</>';允许管理员选中一个复选框,此后代码将获取ID,然后运行check_payment.php,该查询的查询将ID插入该ID行。

 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,   
            });
        } );

1 个答案:

答案 0 :(得分:0)

这是VanillaJS方法。现在我们有了document.querySelector,因此在 my 视图中,jQuery已贬值了一段时间。据我所知,您的逻辑是可靠的,所以我只能假设它是jQuery调用中的一个正在中断,而老实说,我不知道是哪个。

// 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);

编辑:我认为可能发生的事情是onLoad处理程序(或者使用jQuery的onReady)永远不会触发,因为代码是嵌入在主体中的。如果脚本在头,请使用eventHandler;如果脚本在正文中,则只需在设置复选框的点击处理程序之后调用onReady()