Question

我有三个单选按钮列表，我希望在页面加载时选择每个按钮的第一个选项。这些选项是根据MySQL检索查询填充的。

当前，仅检查第一个单选按钮列表的第一个元素。我正在努力让其他两个列表的第一个元素在加载时进行检查。

<ul id="radio" class="input-list">
    <?php
        $stmt = mysqli_prepare($link, "SELECT id, name, price FROM cases ORDER BY price");
        $stmt->execute();
        $stmt->bind_result($case_id, $case_name, $case_price);
        while($stmt->fetch()) 
        {
            echo 
            '<li>
                <input id="'.$case_id.'" name="config-prod" value="'.$case_id.'" type="radio">
                <label class="sub-label" for="'.$case_id.'">'.$case_name.'    [£'.$case_price.']</label>
            </li>';
        }
        $stmt->close();
        ?>
        </ul>

        <ul id="radio" class="input-warranty">
            <?php
                $stmt18 = mysqli_prepare($link, "SELECT id, name, price FROM warranty ORDER BY price");
                $stmt18->execute();
                $stmt18->bind_result($warranty_id, $warranty_name, $warranty_price);
                while($stmt18->fetch()) 
                {
                    echo 
                    '<li>
                        <input id="'.$warranty_id.'" name="config-warranty" value="'.$warranty_id.'" type="radio">
                        <label class="sub-label" for="'.$warranty_id.'">'.$warranty_name.'    [£'.$warranty_price.']</label>
                    </li>';
                }
                $stmt18->close();
            ?>
        </ul>

        <ul id="radio" class="input-build">
        <?php
            $stmt19 = mysqli_prepare($link, "SELECT id, name, price FROM buildtime ORDER BY price");
            $stmt19->execute();
            $stmt19->bind_result($buildtime_id, $buildtime_name, $buildtime_price);
            while($stmt19->fetch()) 
            {
                echo 
                '<li>
                    <input id="'.$buildtime_id.'" name="config-build" value="'.$buildtime_id.'" type="radio">
                    <label class="sub-label" for="'.$buildtime_id.'">'.$buildtime_name.'    [£'.$buildtime_price.']</label>
                </li>';
            }
        $stmt19->close();
    ?>
</ul>

我已经使用javascript获取了要在加载时检查的第一个单选按钮列表的第一个选项：

<script>
        document.querySelector("#radio li input").checked = true;   
</script>

如何在加载时选择第二和第三列表的第一个元素？谢谢。

Answer 1

继RobG的评论：

...
$isFirst = true;
while($stmt->fetch()) {
  echo '<li>
    <input id="'.$case_id.'" name="config-prod" value="'.$case_id.'" type="radio"'.$isFirst?' checked':''.'>
    <label class="sub-label" for="'.$case_id.'">'.$case_name.'         [£'.$case_price.']</label>
  </li>';
  $isFirst = false;
}
...

$isFirst = true;
while($stmt18->fetch()) {
  echo '<li>
    <input id="'.$warranty_id.'" name="config-warranty" value="'.$warranty_id.'" type="radio"'.$isFirst?' checked':''.'>
    <label class="sub-label" for="'.$warranty_id.'">'.$warranty_name.'         [£'.$warranty_price.']</label>
  </li>';
  $isFirst = false;
}
...

顺便说一句，

顺便说一句，最好编写一个函数来生成一个复选框，然后将该函数用于不同的循环；）。例如，以下代码更具可读性。

function echoCheckbox($property, $id, $name, $price, $checked){
  echo '<li>
    <input id="'.$id.'" name="'.$property.'" value="'.$id.'" type="radio"'.$checked?' checked':''.'>
    <label class="sub-label" for="'.$id.'">'.$name.'[£'.$price.']</label>
  </li>';
}
...
$isFirst = true;
while($stmt->fetch()) {
  echoCheckbox("config-prod", $case_id, $case_name, $case_price, $isFirst);
  $isFirst = false;
}
...

$isFirst = true;
while($stmt18->fetch()) {
  echoCheckbox("config-warranty", $warranty_id, $warranty_name, $warranty_price, $isFirst);
  $isFirst = false;
}
...

加载时自动检查三个单选按钮

1 个答案: