Question

我有一个“order_details”表，其中包含“OrderID”，“ProductID”，“UnitPrice”和“Quantity”列。使用这些列的行，我使用以下代码生成复选框。我想在每行复选框旁边添加一个“SelectAll”复选框。我该怎么办？谢谢。

我的复选框表单现在看起来像这样：

以下是代码：checkbox.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>

<body>

<?php

include 'dbconfig.php';

$subjectName = "SELECT * FROM order_details";

$subject = mysql_query( $subjectName, $conn );
?>
<h2> Select Order</h2>

 <form method="post" action=" ">

 <?php

 while($data = mysql_fetch_array($subject)) {

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'] . '</br>'; 
}

?>

 </form>

</body>
</html>

Answer 1

试试这个

<script src="/scripts/app.js"></script>

Answer 2

写div中的所有行，我认为这有效;

<?php
while($data = mysql_fetch_array($subject)) {
echo '<div>';
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 "<input type='checkbox' class='check-all'>Check All";
echo "</div>";
}
?>

<script>
    $(".check-all").click(function () {
        $(this).parent().find('input:checkbox').not(this).prop('checked', this.checked);
    });
</script>

Answer 3

这可以使用jQuery，

完成

在while()循环外添加此内容：

<input type="checkbox" name="select-all" id="select-all" />

然后在jQuery中添加以下内容：

$('#select-all').click(function(event) {   
    if(this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    } else {
        $(':checkbox').each(function() {
            this.checked = false;                       
        });
    }
});

选中动态复选框输入的全部复选框

3 个答案: