radiobox js 选中

基础概念： radiobox（单选框）是HTML表单元素之一，用于在一组选项中选择一个。在JavaScript中，可以通过操作DOM元素的属性和方法来控制单选框的选中状态。

相关优势：

用户界面友好，易于理解和使用。
可以通过JavaScript轻松控制选中状态，实现动态交互效果。
结合CSS可以自定义样式，满足不同的设计需求。

类型：

原生HTML单选框：使用<input type="radio">标签。
自定义样式单选框：通过CSS和JavaScript实现自定义外观的单选框。

应用场景：

表单提交时选择性别、年龄范围等。
设置偏好选项，如主题颜色、通知方式等。
在问卷调查中选择答案。

示例代码：以下是一个简单的原生HTML单选框示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio Box Example</title>
</head>
<body>
    <form>
        <label>
            <input type="radio" name="gender" value="male"> 男
        </label>
        <label>
            <input type="radio" name="gender" value="female"> 女
        </label>
    </form>

    <script>
        // JavaScript控制选中状态
        document.querySelector('input[name="gender"][value="male"]').checked = true; // 默认选中“男”
    </script>
</body>
</html>

常见问题及解决方法：

多个单选框同时选中：
- 确保所有单选框具有相同的name属性，这样浏览器会自动处理选中状态。

通过JavaScript设置选中状态无效：
- 确保在DOM完全加载后再执行JavaScript代码，可以使用window.onload事件或DOMContentLoaded事件。

window.onload = function() {
    document.querySelector('input[name="gender"][value="male"]').checked = true;
};

样式问题：
- 使用CSS自定义单选框样式时，注意伪元素的选择和布局。

input[type="radio"] {
    display: none;
}

label {
    cursor: pointer;
}

label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 50%;
    margin-right: 5px;
}

input[type="radio"]:checked + label::before {
    background-color: #007bff;
    border-color: #007bff;
}

通过以上方法，可以有效解决单选框在使用过程中遇到的常见问题。