如何从 mysql 布尔值加载复选框选中状态，并在选中复选框时动态更改数据库中的 mysql 布尔值？

Question

I am building an internal error reporting system for a small non-profit. I have everything working that I promised my client, but I cannot seem to get the checkbox to have the behavior I desire. I want the checkboxes to load either checked or not based on the bool(tinyint) value in the mysql database. Then I need to dynamically update the database value when the status of the checkbox is changed by the user. A cherry on top would update the 'isactive' field of the database with the checked status as well. I tagged AJAX and Jquery because, although I don't know them, I believe they may be necessary for the task.

<?php
$errortypearray = ["Broken Link", "Broken Image", "English Usage", "Incorrect Results", 
"Unexpected Behavior", "Other"];
$priorityarray = ["Review", "Low", "Moderate", "High"];
$boolarray = ["Closed", "Active"];

// Below is optional, remove if you have already connected to your database.
$mysqli = mysqli_connect('localhost', 'root', 'a1b2c3D4', 'pcrerrors');

// For extra protection these are the columns of which the user can sort by (in your database table).
$columns = array('errorID','reporter','errortype','priority','description','recipient','reportdate');

// Only get the column if it exists in the above columns array, if it doesn't exist the database table will be sorted by the first item in the columns array.
$column = isset($_GET['column']) && in_array($_GET['column'], $columns) ? $_GET['column'] : $columns[0];

// Get the sort order for the column, ascending or descending, default is ascending.
$sort_order = isset($_GET['order']) && strtolower($_GET['order']) == 'desc' ? 'DESC' : 'ASC';

// Get the result...
if ($result = $mysqli->query('SELECT * FROM errors ORDER BY ' .  $column . ' ' . $sort_order)) {
    // Some variables we need for the table.
    $up_or_down = str_replace(array('ASC','DESC'), array('up','down'), $sort_order); 
    $asc_or_desc = $sort_order == 'ASC' ? 'desc' : 'asc';
    $add_class = ' class="highlight"';
    ?>
    <!DOCTYPE html>
    <html>
        <head>
            <title>PCR Error Portal</title>
            <meta charset="utf-8">
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
            <link rel="stylesheet" href="style.css">
            <style>
            html {
                font-family: Tahoma, Geneva, sans-serif;
                padding: 10px;
            }
            table {
                border-collapse: collapse;
                min-width: 100px;
                width: 50%;
                box-sizing: border-box;
                font-size: .55em;
            }
            th {
                background-color: rgba(0, 52, 133, 1);
                border: 1px solid #54585d;
            }
            th:hover {
                background-color: #64686e;
            }
            th:hover:last-child {
                background-color: #54585d;
            }
            th a {
                display: block;
                text-decoration:none;
                padding: 5px;
                color: #ffffff;
                font-weight: bold;
                font-size: 13px;
            }
            th a i {
                margin-left: 5px;
                color: rgba(255,255,255,0.4);
            }
            td {
                padding: 10px;
                color: #636363;
                border: 1px solid #dddfe1;
            }
            tr {
                background-color: #ffffff;
            }
            tr .highlight {
                background-color: #f9fafb;
            }
            </style>
        </head>
        <body>
            <div class="header">
                <img class="logo" name="pcrlogo" id="pcrlogo" src="https://politicalcandidatereference.com/wp-content/uploads/2022/05/pcr-logo02.png" width="360px">
            </div>
            <div class="subheader">
                <h1><strong>PCR Error Report</strong></h1>
            </div>
            <div class="tableContainer" >
                <table class="table" >
                    <tr>
                        <th><a href="recordportal2.php?column=errorID&order=<?php echo $asc_or_desc; ?>">ErrorID<i class="fas fa-sort<?php echo $column == 'errorID' ? '-' . $up_or_down : ''; ?>"></i></a></th>
                        <th><a href="recordportal2.php?column=reporter&order=<?php echo $asc_or_desc; ?>">Reporter<i class="fas fa-sort<?php echo $column == 'reporter' ? '-' . $up_or_down : ''; ?>"></i></a></th>
                        <th><a href="recordportal2.php?column=errortype&order=<?php echo $asc_or_desc; ?>">Error Type<i class="fas fa-sort<?php echo $column == 'errortype' ? '-' . $up_or_down : ''; ?>"></i></a></th>
                        <th><a href="recordportal2.php?column=priority&order=<?php echo $asc_or_desc; ?>">Priority<i class="fas fa-sort<?php echo $column == 'priority' ? '-' . $up_or_down : ''; ?>"></i></a></th>
                        <th><a href="recordportal2.php?column=description&order=<?php echo $asc_or_desc; ?>">Error Description<i class="fas fa-sort<?php echo $column == 'description' ? '-' . $up_or_down : ''; ?>"></i></a></th>
                        <th><a href="recordportal2.php?column=recipient&order=<?php echo $asc_or_desc; ?>">Assigned To<i class="fas fa-sort<?php echo $column == 'recipient' ? '-' . $up_or_down : ''; ?>"></i></a></th>
                        <th><a href="recordportal2.php?column=reportdate&order=<?php echo $asc_or_desc; ?>">Date Reported<i class="fas fa-sort<?php echo $column == 'reportdate' ? '-' . $up_or_down : ''; ?>"></i></a></th>
                        <th><a href="recordportal2.php?column=isactive&order=<?php echo $asc_or_desc; ?>">Status<i class="fas fa-sort<?php echo $column == 'isactive' ? '-' . $up_or_down : ''; ?>"></i></a></th>
                        <th><a href="recordportal2.php?column=completed&order=<?php echo $asc_or_desc; ?>">Completed<i class="fas fa-sort<?php echo $column == 'completed' ? '-' . $up_or_down : ''; ?>"></i></a></th>
                    </tr>
                    <?php while ($row = $result->fetch_assoc()): ?>
                    <tr>
                        <td<?php echo $column == 'errorID' ? $add_class : ''; ?>><?php echo $row['errorID']; ?></td>
                        <td<?php echo $column == 'reporter' ? $add_class : ''; ?>><?php echo ucfirst($row['reporter']); ?></td>
                        <td<?php echo $column == 'errortype' ? $add_class : ''; ?>><?php echo $errortypearray[$row['errortype']]; ?></td>
                        <td<?php echo $column == 'priority' ? $add_class : ''; ?>><?php echo $priorityarray[$row['priority']]; ?></td>
                        <td<?php echo $column == 'description' ? $add_class : ''; ?>><?php echo $row['description']; ?></td>
                        <td<?php echo $column == 'recipient' ? $add_class : ''; ?>><?php echo ucfirst($row['recipient']); ?></td>
                        <td<?php echo $column == 'reportdate' ? $add_class : ''; ?>><?php echo $row['reportdate']; ?></td>
                        <td<?php echo $column == 'isactive' ? $add_class : ''; ?>><?php echo $boolarray[$row['isactive']]; ?></td>
                        <!-- The row below is what I need to fix, I want it to load with the checkbox checked or not depending upon the 0,1 value from the database 
                            After that is working, I need to make it so when the status of the checkbox is changed the status of the 'isactive' bool variable also changes -->
                        <td<?php echo $column == 'completed' ? $add_class : ''; ?>><input type="checkbox" checked="<?php echo ($row['completed'] == 0) ? "true" : "false"; ?>" ></td>
                    </tr>
                    <?php endwhile; ?>
                </table>
            </div>
            <div class="subfooter"><p><a href="http://localhost:8088/PCRErrorReporting/PCRindex.html">Report Another Error</a></p>
        </body>
    </html>
    <?php
    $result->free();
}
?>

Answer 1

Have you tried the.change jquery function? Example:

<input type="checkbox" id="check">
<script>
   $('#check').change(function () {
     alert('changed');
   });
</script>