显示复选框中的按钮

Question

我有一个包含不同健身练习的数据库，我试图为每个练习制作一个排行榜，我想要一个类似复选框的表单，它可以从我的数据库中获取所有练习并将它们添加为复选按钮，当您检查它们时，我希望他们将导航栏显示为单击选项。

我正在手动执行此操作，但我希望它是动态的，但我不知道该怎么做 我正在使用 bootstrap5，这就是我现在所拥有的，我将感谢任何提示或建议

 <div class="collapse navbar-collapse justify-content-center" id="navbarCategories">
                                <ul class="navbar-nav" id="navbar">
                                    <li class="nav-item"><a href="#squats" class="nav-link" style="color: #c5c6c8;">Squats</a></li>
                                    <li class="nav-item"><a href="#deadlifts" class="nav-link" style="color: #c5c6c8;">Deadlifts</a></li>
                                    <li class="nav-item"><a href="#benchpress" class="nav-link" style="color: #c5c6c8;">Bench Press</a></li>
                                    <li class="nav-item"><a href="#overheadpress" class="nav-link" style="color: #c5c6c8;">Overhead Press</a></li>
                                    <div class="dropdown">
                                        <button class="nav-link btn btn-primry dropdown-toggle"data-bs-toggle="dropdown" style="color: #c5c6c8;">Add favorite</button></li>
                                        <ul class="dropdown-menu">
                                        <form id="checkform">
                                            <input type="checkbox" id="benchpress" name="benchpress" value="Bench Press">
                                            <label for="benchpress">Bench Press</label><br>
                                            <input type="checkbox" id="deadlift" name="deadlift" value="Deadlifts">
                                            <label for="deadlift">Deadlifts</label><br>
                                            <input type="checkbox" id="overheadpress" name="overheadpress" value="Overhead Press">
                                            <label for="overheadpress">Overhead Press</label><br><br>
                                            <input type="submit" value="Submit">
                                        </form>
                                        </ul>       
                                    </div>
                                </ul>
                            </div>

Answer 1

要使复选框表单动态化并根据数据库中的练习自动生成导航栏选项，您需要使用服务器端脚本语言，例如 PHP 或 JavaScript。这是使用 JavaScript 的基本方法：

1. 从数据库中获取练习列表。
2. 根据获取的数据动态生成复选框表单。
3. 使用 JavaScript 处理表单提交并根据所选练习动态更新导航栏。

以下是如何修改代码来实现此目的：

<div class="collapse navbar-collapse justify-content-center" id="navbarCategories">
    <ul class="navbar-nav" id="navbar">
        <!-- Navbar options will be dynamically added here -->
        <div class="dropdown">
            <button class="nav-link btn btn-primry dropdown-toggle" data-bs-toggle="dropdown" style="color: #c5c6c8;">Add favorite</button>
            <ul class="dropdown-menu" id="exerciseList">
                <!-- Checkbox form will be dynamically added here -->
            </ul>
        </div>
    </ul>
</div>

<script>
    // Simulated list of exercises (replace this with data from your database)
    const exercises = ['Squats', 'Deadlifts', 'Bench Press', 'Overhead Press'];

    // Function to dynamically generate the checkbox form
    function generateCheckboxForm() {
        const exerciseList = document.getElementById('exerciseList');
        exerciseList.innerHTML = ''; // Clear existing content

        exercises.forEach(exercise => {
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.id = exercise.toLowerCase().replace(' ', '');
            checkbox.name = 'exercise';
            checkbox.value = exercise;
            
            const label = document.createElement('label');
            label.htmlFor = checkbox.id;
            label.textContent = exercise;

            const br = document.createElement('br');

            exerciseList.appendChild(checkbox);
            exerciseList.appendChild(label);
            exerciseList.appendChild(br);
        });
    }

    // Call the function to generate the checkbox form
    generateCheckboxForm();

    // Function to handle form submission
    document.getElementById('checkform').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent default form submission behavior

        const selectedExercises = [];
        const checkboxes = document.querySelectorAll('input[name="exercise"]:checked');
        checkboxes.forEach(checkbox => {
            selectedExercises.push(checkbox.value);
        });

        // Update the navbar options based on the selected exercises
        const navbar = document.getElementById('navbar');
        navbar.innerHTML = ''; // Clear existing navbar options

        selectedExercises.forEach(exercise => {
            const listItem = document.createElement('li');
            listItem.classList.add('nav-item');
            const link = document.createElement('a');
            link.href = '#' + exercise.toLowerCase().replace(' ', '');
            link.classList.add('nav-link');
            link.textContent = exercise;
            listItem.appendChild(link);
            navbar.appendChild(listItem);
        });
    });
</script>

如果您提供更多详细信息，将对回答您的问题更有帮助。后端技术、如何进行 API 调用等详细信息

无论如何，请记住将练习数组替换为使用 AJAX 或任何服务器端脚本语言从数据库中获取的实际数据。