php - 更改单选按钮颜色并选择加载的第一个元素

Question

我正在尝试用来自 MySQL 的数据填充单选按钮。

我希望选定的单选按钮改变颜色，并在页面加载时选择第一个元素。

我该怎么做？

<div class="panel bg-product">
  <?php
    $stmt = mysqli_prepare($link, "SELECT id, name, price FROM products");
    $stmt->execute();
    $stmt->bind_result($prod_id, $prod_name, $prod_price);
    while($stmt->fetch()) {
      echo '<label><input type="radio" name="config-prod" value="'.$prod_id.'"> ' .$prod_name.'</label><br>';
    }
    $stmt->close();
  ?>
</div>

CSS:

.panel input[type="radio"]:checked + label{
  font-weight: 700;
  color: red;
  transition: color 0.5s ease;
}

此 CSS 不会更改单选按钮在被选中时的颜色，也不会在加载时改变单选按钮的颜色。

Answer 1

这是你的新 CSS:

.input-list {
    list-style-type: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.input-list li input:checked{
  content: "";
      -webkit-appearance: push-button;
    width: 12px;
    border-radius: 13px;
    height: 12px;
    background: red;
}

.input-list li input:checked + label {
  color: red;
}

新的 JS 代码:

document.querySelector("#radio li input").checked = true;

还有你的新 PHP:

    <ul id="radio" class="input-list">
  <?php
    $stmt = mysqli_prepare($link, "SELECT id, name, price FROM products");
    $stmt->execute();
    $stmt->bind_result($prod_id, $prod_name, $prod_price);
    while($stmt->fetch()) {
      echo '<li>
              <input id="'.$prod_id.'" name="config-prod" value="'.$prod_id.'" type="radio">
              <label class="sub-label" for="'.$prod_id.'">'.$prod_name.'</label>
            </li>';
    }
    $stmt->close();
  ?>
</ul>

这就是它的样子:

document.querySelector("#radio li input").checked = true;

.input-list {
    list-style-type: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.input-list li input:checked {
  content: "";
      -webkit-appearance: push-button;
    width: 12px;
    border-radius: 13px;
    height: 12px;
    background: red;
}

.input-list li input:checked + label {
  color: red;
}

<ul id="radio" class="input-list">
  <li>
    <input id="first" name="radio" value="first" type="radio">
    <label class="sub-label" for="first">first</label>
  </li>
  <li>
    <input id="second" name="radio" value="second" type="radio">
    <label class="sub-label" for="second">second</label>
  </li>
</ul>