如何使用jQuery在页面刷新时保留复选框状态？

Hey there! The issue you're facing is that while you're saving the checkbox state to the server when it changes, you're not loading that saved state back into the checkbox when the page first loads. That's why every refresh resets it to the default unchecked state—your page has no idea what the last saved value was!

Let's fix this step by step: #

1. Update your frontend code to load the state on page load

We'll add an AJAX request when the document is ready to fetch the saved state from the server, then set the checkbox accordingly. Also, I noticed your confirmation prompt was missing the confirm() function—fixed that too!

$(document).ready(function() {
    // Fetch saved state and set checkbox on page load
    $.ajax({
        type: 'GET',
        url: 'checkbox.php',
        success: function(response) {
            // Convert response to boolean (assuming server returns 1 or 0)
            const isChecked = parseInt(response) === 1;
            $('#mycheckbox').prop('checked', isChecked);
        },
        error: function() {
            console.log('Failed to load saved checkbox state');
        }
    });

    // Your existing change event logic (with fixed confirmation)
    $('#mycheckbox').change(function () { 
        const returnVal = confirm("Are you sure?");
        if (returnVal) { 
            postToServer($(this).prop("checked")); 
        } else { 
            $(this).prop("checked", !$(this).is(":checked")); 
        } 
    });
});

function postToServer(state) { 
    let value = state ? 1 : 0; 
    $.ajax({ 
        type: 'POST', 
        url: 'checkbox.php', 
        data: {'value': value}, 
        success: function (response) { 
            console.log('Checkbox state saved successfully');
        },
        error: function() {
            // Revert checkbox state if save fails
            $('#mycheckbox').prop('checked', !state);
            alert('Failed to save checkbox state. Please try again.');
        }
    }); 
}

2. Modify your checkbox.php to handle both save (POST) and load (GET) requests

Your current backend only handles saving the state—we need to add logic to return the saved state when a GET request comes in. Below is an example using PHP sessions (you could also use a database if needed):

<?php
session_start();

// Handle POST request (save state)
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['value'])) {
        $_SESSION['checkbox_state'] = $_POST['value'];
        echo 'success';
    }
} 
// Handle GET request (load state)
elseif ($_SERVER['REQUEST_METHOD'] === 'GET') {
    // Return saved state, default to 0 (unchecked) if none exists
    echo isset($_SESSION['checkbox_state']) ? $_SESSION['checkbox_state'] : 0;
}
?>

Key Notes: #

• The $(document).ready() block ensures we fetch the state right when the page finishes loading, so the checkbox shows the correct saved state immediately.
• Adding error handling in the AJAX calls ensures that if something goes wrong (like a server error), the checkbox state doesn't get out of sync with what's saved on the server.
• I fixed the confirmation prompt to use confirm()—your original code just created a string, which would always evaluate to true, so the "cancel" action never worked.

内容的提问来源于stack exchange，提问作者mehdi Mollazehi