如何为order_details表每行动态复选框添加SelectAll复选框？

Got it, let's get this sorted for you! First, a quick heads-up: the mysql_* functions you're using are deprecated and no longer supported in modern PHP versions. I'll update your code to use mysqli instead (the current recommended extension for MySQL) to keep things secure and compatible.

Now, to add a "Select All" checkbox for each row that toggles the four checkboxes in that row, we'll combine PHP for structuring the rows and JavaScript for the toggle logic. Here's the complete updated code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
/* Optional: Clean up row styling for better readability */
.order-row {
    margin: 8px 0;
    padding: 4px;
    border-bottom: 1px solid #eee;
}
</style>
</head>
<body>
<?php 
include 'dbconfig.php'; 
// Switch to mysqli (ensure your dbconfig.php uses mysqli connection, e.g., mysqli_connect())
$subjectName = "SELECT * FROM order_details";
$subject = mysqli_query($conn, $subjectName); 
?>
<h2> Select Order</h2>
<form method="post" action="">
<?php 
$rowCounter = 0;
while($data = mysqli_fetch_array($subject)) { 
    $rowCounter++;
    echo "<div class='order-row'>";
    // Add Select All checkbox linked to this row
    echo "<input type='checkbox' class='select-all' data-target-row='row-$rowCounter'> Select All ";
    // Wrap row's checkboxes in a uniquely identified container
    echo "<span id='row-$rowCounter'>";
    echo "<input type='checkbox' value='{$data['OrderID']}'>" . $data['OrderID'] ;
    echo "<input type='checkbox' value='{$data['ProductID']}'>" . $data['ProductID'] ;
    echo "<input type='checkbox' value='{$data['UnitPrice']}'>" . $data['UnitPrice'] ;
    echo "<input type='checkbox' value='{$data['Quantity']}' >" . $data['Quantity'];
    echo "</span></div>";
} 
?>
</form>

<script>
// Add toggle logic to all Select All checkboxes
document.querySelectorAll('.select-all').forEach(selectAllBox => {
    selectAllBox.addEventListener('click', function() {
        // Get the target row's ID from the data attribute
        const targetRowId = this.getAttribute('data-target-row');
        const rowCheckboxes = document.querySelectorAll(`#${targetRowId} input[type="checkbox"]`);
        
        // Sync all row checkboxes to match the Select All state
        rowCheckboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
    });
});
</script>
</body>
</html>

Key Changes Breakdown: #

1. Updated Database Extension: Swapped mysql_* for mysqli_* to comply with modern PHP standards. Double-check your dbconfig.php uses a mysqli connection (e.g., $conn = mysqli_connect($host, $username, $password, $dbname);).
2. Row Grouping: Each row is wrapped in a <div> for styling, and the four data checkboxes live in a uniquely identified <span>—this lets the JavaScript target exactly the right checkboxes for each "Select All" toggle.
3. Select All Checkbox: Each row gets a dedicated checkbox with a data-target-row attribute that links it to its row's checkbox container.
4. JavaScript Toggle Logic: We listen for clicks on any "Select All" checkbox, then find all checkboxes in its linked row and set their checked state to match the "Select All" box.

Optional Upgrade for Tabular Data: #

Since you're displaying table-like data, using an HTML table will make alignment cleaner. Here's how to adjust the PHP row output:

echo "<tr>";
echo "<td><input type='checkbox' class='select-all' data-target-row='row-$rowCounter'> Select All</td>";
echo "<td><input type='checkbox' value='{$data['OrderID']}'>{$data['OrderID']}</td>";
echo "<td><input type='checkbox' value='{$data['ProductID']}'>{$data['ProductID']}</td>";
echo "<td><input type='checkbox' value='{$data['UnitPrice']}'>{$data['UnitPrice']}</td>";
echo "<td><input type='checkbox' value='{$data['Quantity']}'>{$data['Quantity']}</td>";
echo "</tr>";

Just wrap all rows in <table><tbody> tags for proper table structure.

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