在 php foreach 循环中创建的复选框无法被选中

Question

我创建了一个 foreach 循环。一切都按其应有的方式正确显示。然而，问题是我唯一可以选择的复选框是第一行。单击任何其他复选框也会选择循环中的第一个复选框。我还可以选择循环外部的复选框，该复选框将选择循环内部的所有复选框。

<?php 
$count = 0;
foreach($invoiceItems as $invoiceItem){
    $count++;
    echo '
    <tr>
        <td><div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input itemRow" id="itemRow">
        <label class="custom-control-label" for="itemRow"></label>
        </div></td>
        <td><input type="text" value="'.$invoiceItem["item_code"].'" name="productCode[]" id="productCode_'.$count.'" class="form-control" autocomplete="off"></td>
        <td><input type="text" value="'.$invoiceItem["item_name"].'" name="productName[]" id="productName_'.$count.'" class="form-control" autocomplete="off"></td>         
        <td><input type="number" value="'.$invoiceItem["order_item_quantity"].'" name="quantity[]" id="quantity_'.$count.'" class="form-control quantity" autocomplete="off"></td>
        <td><input type="number" value="'.$invoiceItem["order_item_price"].'" name="price[]" id="price_'.$count.'" class="form-control price" autocomplete="off"></td>
        <td><input type="number" value="'.$invoiceItem["order_item_final_amount"].'" name="total[]" id="total_'.$count.'" class="form-control total" autocomplete="off"></td>
    </tr>
    ';
}
?>

Answer 1

您面临的问题是由于复选框输入字段的

id

属性造成的。

id

属性在 HTML 文档中必须是唯一的。在您的代码中，所有复选框都具有相同的“itemRow”

id

，这就是为什么只有第一个复选框可选。

要解决此问题，您可以将

$count

变量附加到复选框的

id

及其相应标签。以下是修改代码的方法：

<?php 
$count = 0;
foreach($invoiceItems as $invoiceItem){
    $count++;
    echo '
    <tr>
        <td><div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input itemRow" id="itemRow_'.$count.'">
        <label class="custom-control-label" for="itemRow_'.$count.'"></label>
        </div></td>
        <td><input type="text" value="'.$invoiceItem["item_code"].'" name="productCode[]" id="productCode_'.$count.'" class="form-control" autocomplete="off"></td>
        <td><input type="text" value="'.$invoiceItem["item_name"].'" name="productName[]" id="productName_'.$count.'" class="form-control" autocomplete="off"></td>         
        <td><input type="number" value="'.$invoiceItem["order_item_quantity"].'" name="quantity[]" id="quantity_'.$count.'" class="form-control quantity" autocomplete="off"></td>
        <td><input type="number" value="'.$invoiceItem["order_item_price"].'" name="price[]" id="price_'.$count.'" class="form-control price" autocomplete="off"></td>
        <td><input type="number" value="'.$invoiceItem["order_item_final_amount"].'" name="total[]" id="total_'.$count.'" class="form-control total" autocomplete="off"></td>
    </tr>
    ';
}
?>

这应该可以解决您的问题并允许独立选择每个复选框。