У меня есть три списка переключателей, и я хотел бы, чтобы при загрузке страницы выбирался первый вариант каждого из них. Параметры заполняются на основе поисковых запросов 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>
Как я могу сделать так, чтобы первый элемент второго и третьего списков выбирался при загрузке? Спасибо.
Это действительно нужно сделать на сервере, установив атрибут проверил для первого переключателя каждого набора.
Я бы смешивал как можно меньше HTML с PHP, за исключением сборки страниц (если вы должны), которая выглядит так. Я бы использовал PHP для получения и настройки MySQL с помощью mysqli или PDO. Максимально настройте свою страницу с помощью HTML, а затем AJAX в том, что вам нужно, как вам нужно. Используйте внешний CSS и JavaScript, чтобы они кэшировались, помня при развертывании, измените имена файлов или используйте метод получения URL при изменении файлов. Просто комментарии.
В продолжение комментария 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;
}
...
Не используйте один и тот же атрибут
id
для разных элементов. Вместо этого вы можете создать собственный класс, такой какmy-radio
, а затем получить все элементы с помощьюdocument.querySelectorAll(".my-radio li input")
, чтобы, наконец, перебрать элементы и установить свойствоchecked
для каждого из них.