如何使用查询参数预填充单选按钮？

在前端开发中，使用查询参数预填充单选按钮是一种常见的需求，通常用于根据URL中的参数来设置页面上某些控件的初始状态。以下是如何实现这一功能的步骤：

基础概念

查询参数（Query Parameters）是URL中?后面的部分，用于传递额外的信息。例如，在URL http://example.com/?gender=male 中，gender=male 就是一个查询参数。

单选按钮（Radio Buttons）是一种用户界面元素，允许用户从多个选项中选择一个。

实现步骤

获取查询参数：首先，你需要从当前URL中获取查询参数的值。
设置单选按钮状态：然后，根据获取到的参数值，设置相应的单选按钮为选中状态。

示例代码

以下是一个使用JavaScript实现上述功能的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pre-fill Radio Buttons with Query Parameters</title>
</head>
<body>
    <form>
        <label>
            <input type="radio" name="gender" value="male"> Male
        </label>
        <label>
            <input type="radio" name="gender" value="female"> Female
        </label>
        <label>
            <input type="radio" name="gender" value="other"> Other
        </label>
    </form>

    <script>
        // Function to get query parameter value
        function getQueryParam(paramName) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(paramName);
        }

        // Function to pre-fill radio buttons
        function preFillRadioButtons() {
            const gender = getQueryParam('gender');
            if (gender) {
                const radioButtons = document.querySelectorAll('input[name="gender"]');
                radioButtons.forEach(radio => {
                    if (radio.value === gender) {
                        radio.checked = true;
                    }
                });
            }
        }

        // Call the function when the page loads
        window.onload = preFillRadioButtons;
    </script>
</body>
</html>