Я пытаюсь заполнить радио-кнопки данными из 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 не изменяет цвет переключателя, когда он выбран, и переключатель не выбирается при загрузке.

2
M.Tesrak 27 Май 2019 в 19:56

2 ответа

Лучший ответ

Это ваш новый 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>
0
Krzysztof AN 27 Май 2019 в 18:08

Это должно помочь вам. Но вы должны заметить, что это цвет label, а не radio, я думаю, это то, чего вы пытались достичь.

Html:

<div class="panel">
  <input type="radio"  name="radios" /><label>R1</label> //label for first Radio
  <input type="radio" name="radios" /><label>R2</label> //Label for second radio
</div>

Css:

.panel input[type="radio"]:checked + label{
  background-color: yellow;
  width: 10px;
  height: 10px;
  display: inline-block;
}

Проверено на Codepen и работает. Просто используйте это как шаблон и заполните ваши данные соответственно. Просто использовал некоторые style, чтобы сделать это видимым во время тестирования.

0
Mosia Thabo 27 Май 2019 в 17:32