Автоматически проверять три переключателя при загрузке

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

Как я могу сделать так, чтобы первый элемент второго и третьего списков выбирался при загрузке? Спасибо.

Не используйте один и тот же атрибут id для разных элементов. Вместо этого вы можете создать собственный класс, такой как my-radio, а затем получить все элементы с помощью document.querySelectorAll(".my-radio li input"), чтобы, наконец, перебрать элементы и установить свойство checked для каждого из них.

Shidersz 28.05.2019 22:21

Это действительно нужно сделать на сервере, установив атрибут проверил для первого переключателя каждого набора.

RobG 28.05.2019 22:25

Я бы смешивал как можно меньше HTML с PHP, за исключением сборки страниц (если вы должны), которая выглядит так. Я бы использовал PHP для получения и настройки MySQL с помощью mysqli или PDO. Максимально настройте свою страницу с помощью HTML, а затем AJAX в том, что вам нужно, как вам нужно. Используйте внешний CSS и JavaScript, чтобы они кэшировались, помня при развертывании, измените имена файлов или используйте метод получения URL при изменении файлов. Просто комментарии.

StackSlave 29.05.2019 01:38
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
63
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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;
}
...

Другие вопросы по теме